ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ

西田 鉄平No CommentsWebデザイン

Designers_Slide

デザインの流れや基本的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。

IT/WEB業界への転職なら

もくじ

サイト設計／構成

デザイン基本設計

バージョン管理

コーディング

CMS組み込み

＋アプリ開発

動作検証・試験

＋インフラ

納品

Ｗｅｂマスター

サイト設計／構成

１．要件定義

requirement_slide

ディレクションの一つであるヒアリングからの要件定義、戦略面の設計（情報設計）、ナビゲーションの構成（仕様設計）など。RWD（レスポンシブ・ウェブ・デザイン）での提案方法。

２．企画提案

proposal_slide

ディレクターだけじゃなくて、デザイナーさんも企画提案する場合があるので一応。提案内容の理解を促進させたり、イメージを向上させるハウツー。

３．情報設計・仕様書

information_design_slide

利用者が情報を探しやすいようにするための情報＋画面設計。他はクライアントや制作側が確認する仕様書。後は実装機能・言語・サーバー情報・ポリシー・納品形式などを決めます。

４．使いやすさの設計

ease_of_use_slide

インターフェイスデザインあれこれ。UI・UX・IAやデザインに関して広く浅く解説。

デザイン基本設計

デザイナーはアートディレクターの指示に従い、コンセプトを的確に捉え具体的なデザインに落としこんでいきます。

５．基本原則＋設計

basic_principles_slide

実制作に入る前に基本原則をおさらい。近接（グループ化）、整列（意図的に整列・配置）、反復（特徴を繰り返す）、コントラスト（はっきりした違い）がよくわかるスライド。

６．書体や素材の選び方

material_slide

以下のスライドはコントラスト・書体の選び方・ロゴ・素材の選び方などの基本的なことを学べます。もう一つはセンス云々の前にグリッドシステム・ホワイトスペース・アプローチをおさえましょうという話。

７．配色＋色彩設定

color_setting_slide

提案内容を理解したら、トンマナ（サイトの雰囲気を合わせる）を崩さず、配色を計画し色を効果的に用いて制作を進めます。要件を理解しトーン・キーカラー配分・余白配分などを決める必要があります。

８．フォント設計

fontdesign_slide

文字に関するデザイン表現では、可読性や見やすさを確保しなければいけません。デザイナーは書体・サイズ・文字間・行間・ページ幅などをサイトやターゲットに合わせて組み合わせます。以下はタイプフェイスや組版の基礎知識。

９．フラットデザイン

flat_design_slide

質感や立体感のない平面的なフラットデザイン。こちらは装飾を削るデザインではなく、 フラットな状態から要素を付け足すという考え方。感覚的な伝わりにくさを感じたらアイコンや写真で補います。

１０．デザインカンプ

design_comps_slide

商用サイトの制作では詳細画面デザインが用意されている必要があります。クライアントさんに伝えるときにも必要です。カンプから画像や背景画像を書き出すのかCSSで表示させるか決め、エリア分けなど全体構造をマークアップ、その後テキスト原稿などのコンテンツ部分をマークアップします。

１１．画像パーツ作成

imageparts_slide

商品データに関してはクライアントさんから画像データや印刷資料などが提供されることもあります。ロゴ・ボタン・アイコン・背景などの画像はCSSで表現しない場合はデザインカンプから書き出します。

バージョン管理

１２．Git

git_slide

遅いくらいですけど、やっとこさ筆者の会社でも導入したので。

コーディング

かつてはデザインとコーディングだけでページは成り立っていましたが、JavaScript・CMS連携など多彩な技術が要求されるようになりました。

１３．HTML5

html5_slide

デザインカンプをもとにエディタでHTMLを制作します。エリア分けをイメージしたあと、エリアごとにマークアップ。画像を書きだしたら、メタやコンテンツを適切に書いていきます。

以下はHTML５で拡張されたタグをちゃんと使って、多くの情報を伝えることができるように、意味付けを明確にするために見ておきたいスライド。

１４．CSS/Sass

css_sass_slide

リセットスタイルを指定したら、共通スタイル（ヘッダー・フッター・ナビなど）、IE対策、メディアクエリ指定の流れを把握します。こちらは再利用・保守しやすいように見ておきたいこと。

１５．レスポンシブ

responsive_slide

CSSメディアクエリを利用し、デバイス画面解像度・向きによって適したビジュアルを定義します。コンテンツを分散させずに済むのでメンテナンス性が高くなります。ブレークポイントは768pxで線引するのが一般的。

１６．jQuery

jquery_slide

複雑な処理やエフェクトを簡単な記述で実行できクロスブラウザ対応であるjQuery。以下は基本的なことからプラグイン作成方法まで。

１７．javascript

jquery_basic_slide

JavaScript でオブジェクト指向プログラミングを行う際に知っておきたい基礎知識や概念。他は記述方法、関数の命名規則など盛りだくさんです。

CMS組み込み

１８．WordPress＋レスポンシブ＋フラットデザイン

wp_flat_slide

親から継承した子テーマでWordPress構築していく簡単な実装方法。筆者は静的ページを作ってテストした後に、WPテーマ化していく方法をとるのですが、こちらのスライドはレスポンシブやCSSの基礎知識も盛り込んであるので見ておきたいですね。

１９．WordPress＋ポートフォリオ

wp_portfolio_slide

WordPressを使ってポートフォリオサイトを制作する場合の制作フロー。

２０．高速化

speeding_up_slide

プラグイン、画像ファイル、CSS読み込みなどによる速度の問題をどう解決していくか。