Web制作に必要な知識が一通り学べるベスト記事9選

• 作成：2016/01/18
• 更新：2016/06/29
• Web制作

年末にやるべきだったと思いつつも、今更ながらWeb制作前に知っておくと助かる記事を、コムテブログの中から厳選しました。結構自分でもよく見返す記事です。Web制作に必要な基本知識をざっと知りたいときに。

バージョン管理

ファイル等の変更箇所の履歴を管理。複数人が関わるプロジェクトで必須となるGit（ギット）のコマンドやGUIなどの初歩的な知識を順を追って解説してあります。最初は何を準備すればよいのか、Gitのインストールからクライアントツールとリモートまで。

• これからGit を始めてみようという人のための使い方と入門フロー

パッケージマネージャー/タスクランナー

ライブラリを管理しやすくするパッケージマネージャーと、テスト実行などの処理を簡単なコマンドで自動化するために知っておきたい知識。この記事ではNode.jsから、npm / gulp をインストールして活用するまでのフローを書きました。WindowsとMac両方のバージョン管理ツールnodebrew / nodistのインストール方法も記載。

• Node.jsとgulpをインストールして使うまでの入門記事

証票

企画書・議事録・要件定義書・ＮＤＡ（秘密保持契約）などの書類から、見積書や納品書などの証票一式をまとめた記事。書類が必要になった時にサクッと見る。

• 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３

UX・UI・IA

Webサイト全体の設計図、ナビゲーションをデザインする時、どの位置にどういった情報を配置するのか、画面遷移、画面内の機能の決定などを行う前に復習しておきたい内容。

• UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ

打ち合わせ/受託用マニュアル

クライアントからのサイト制作依頼や問い合わせに対する返答例、制作フローの説明を作るときにどういったこと記述し返答すればよいのか。ヒアリングシートからWordPress管理マニュアルなども網羅。問い合わせがあった後に見るとよいでしょう。

• Web制作者が助かるチートシート・資料・PDFまとめ

全体の制作フロー

見積りの目安から計算方法、受注前のやり取りから契約後のWeb制作の流れが書いてあります。クオリティを一定以上に保つための仕様書もメモしてあります。「次にやるべきこと」が分からなくなった時に見るとよいでしょう。

• Web制作フローが「完璧」にわかる資料や流れのまとめ

コーディングフロー

こちらは、コーディングに特化した制作の流れです。仕様書・入稿データ等の確認、HTML5マークアップ、CSSの設定、WordPress 組み込みの流れまで。コーディング開始前に読んでおきたい内容。

• コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)

マルチデバイス対応

既存のコーポレートサイトをスマホ対応にコーディングした時に遭遇したバグ、ユーザーエージェント判別法、メディアクエリ記法など。前もってバグを知っておき事前に不具合を減らすために知っておきたいこと。

• スマートフォンサイト構築時に気をつけたいポイント集

独自ドメインでHPとgmail を運用させる

ドメイン割り当てや、メール受信設定など依頼によっては請け負うこともあります。独自ドメインでHPとgmail を運用させるまでの流れ。こちらはサーバのレコード設定方法などが役に立ちます。

• サイト制作時に知っておくと「意外」と役に立つこと

2013/07/1

この上なく便利！すごい「jQuery」の小技まとめ３２

先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像な

2016/04/25

これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ

ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。

2013/07/22

ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７

先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、

2013/08/5

ここまで出来る！覚えとくと便利な「プログラム」サンプルまとめ

食材を扱っているお客さんから、「ECサイト」を作ってくれと頼まれたので作成しました（事情により、CMSは使えず）。さらにメンテンスが楽になるように更新やSEOを自動化しました。