ウェブデザインをはじめるあなたへ

ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料

SlideShare

色彩センスのいらない配色講座

• 色相、明度、彩度で色を説明できるようになる。
• ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。
• その上で、あまり間違いのない色の選び方がわかるようになる。

ノンデザイナーのための配色理論

• 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。

ウェブサービスの企画とデザイン

• 僭越ながら明治学院大学で講義した時に作った資料。
• なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。

かんたんキレイなウェブデザイン

• 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。
• なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウェブフォント、SASS・LESS というのがあるのかーーーーーと知ってもらいたい程度。

書籍

インタフェースデザインの心理学―ウェブやアプリに新たな視点をもたらす100の指針

• ウェブデザインについて科学的に考える。
• たぶんセオリーが身につきます。

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

• レスポンシブデザインの基本について
• 「Web はいちいち作り替えない！」という帯にあるように、レスポンシブデザインは保守性の向上につながる。
• タブレットの画面幅なんて無限にあるこんな世の中でどうすればいいのか。
• たしか Retina 対応についても触れていたはず・・・。

ウェブサイト

Twitter Bootstrap

• コンポーネントが充実している
• そのまま使うと "Bootstrap 臭" がすごいので、LESS（か SASS）でカスタマイズするのがおすすめ。

頭のなかにある言葉

• Design ≠ Art. Design は問題解決
• ワイヤフレームで示すのは情報の優先順位

普段趣味でかんたんなウェブページを開発するときによくやる作業の流れ

1. 何をつくるか考える。ペルソナ、シナリオ、ユースケースを明確にする。（Evernote でのメモ書き作業）
2. ウェブページで見せる内容を考えて、優先順位をつける。（Evernote でのメモ書き作業）
3. 優先順位に沿って、ワイヤフレームに素材を配置する。（A4 紙＋鉛筆での作業）
4. ウェブページのコンセプトを考えて、配色を考える。（COLOURloversとか使う）
5. 余裕があれば、カンプをつくる。（Illustrator での作業）
6. レスポンシブデザインにするときは、Mobile, Tablet, Desktop の 3 パターンくらいでワイヤ、カンプを書いて DOM をどう配置するか考える。
7. Twitter Bootstrap を LESS の状態で落としてくる。
   • LESS は CSS のメタ言語 (pre-processor)。LESS→CSS にコンパイルして使うもの
8. variables.less に色設定があるので、予め作った配色を反映させる。
9. Twitter Bootstrap のマニュアルを見ながら、開発を進める。

ウェブページを作る際の参考になれば幸いです。