読者です 読者をやめる 読者になる 読者になる

久保清隆のブログ

ライフハック、健康、旅行など、役立つ情報を書きます。

webデザイン初心者がデザイン力を磨く方法

webデザインをどうやって磨いていったらいいかを、人から聞いたり考えたり調べたりしたものをまとめた。

デザインを見る力、判断力を養う

  • 質の高いデザインを作るためには、デザインの質を判断することが重要
  • 自分自身のデザインを客観的に判断できれば、デザイン力を高めることは可能
  • 見る目を養うことが、デザイン力向上の第一歩
優れたデザインを紹介するサイトを見る
  • 優れたデザインのサイトを見つけるには?
    • 優れたサイトを紹介するサイトを定期的に見に行ったり、RSSを購読する
  • 優れたデザインに触れることで、自分自身に刺激を与えたり、デザイン面での流行を感じる
優れたサイトを見るときのポイント
  • レイアウト
    • ナビゲーションの位置とサイトの構造
      • ページ上部:あまり多くのメニューを並べることはできないので、階層の深いサイトとなる
      • ページのサイド:多くのメニューを並べることができる。フラットな構造のサイトに適している。
      • ページの上とサイドにL字型に配置

上記3つのパターンが多い。

      • ページの内容、ナビゲーションの内容を見て、なぜそのレイアウトを選択しているのかを考える。なぜを最低3回は繰り返す。そうすれば自分の中にデザインを考える際のノウハウがたまっていく。

webデザインに必要な情報・知識を学ぶ

HTMLとCSS

webデザインでは、見た目上のデザインを作成することと、それをHTML、CSSを使って表現出来ることが必要。

  • HTMLとCSSの役割について
    • HTMLでは、文書の論理構造をつくる
    • CSSでは、見た目上の配置を行う
    • このように役割分担することで
      • HTMLのソースがシンプルでわかりやすくなる
      • 同じような部分には同じデザインを簡単に適用できる
      • Googleなどの検索サイトでの表示順位が上がる


HTMLやCSSの文法を覚えただけでは、なかなかデザインができるというレベルには到達できない。以下のサイトで、より実践的なテクニックを少しずつ覚えることで、デザインの幅を広げることができる。

Flashを利用する
  • Flashを使う目的
    • webページの中に動きを入れる(時間軸を持ち込む)ことで複雑なインターフェースを実現する
    • 操作することの楽しさを提供する
    • 美しさを際立たせる
    • Flashを用いたサイトを見る場合のチェックポイント
      • どのような動きを心地よく感じるかを意識してみる
      • 操作しながら、動きの速度、速度の変化を観察する
ユーザビリティ(使いやすさ)を考慮する
  • ユーザビリティが重要な理由
    • サイトの中にどんな情報があるのか、どうすればその情報にたどり着けるのかをわかりやすくユーザに示さなければ、ユーザは見てくれなくなる。
webデザインの注意点
  • 主要なブラウジング環境での見え方をチェック
    • webの場合は、ユーザがどのようなOSで、どのような大きさの画面で見るのかはわからない。従って、主要な環境で正しく表示されているかをチェックする必要がある。
    • 多くのユーザが利用すると想定されるブラウザは確認する。IEFireFox,chromeなど。
    • IE Tab
      • これを使えば、FireFox上でIEのエンジンを動作させ、IEにおけるインターフェースを確認できる。

参考書籍

プロの現場から学ぶWebデザイン

プロの現場から学ぶWebデザイン




────────────────────────


twitter@kbkt:IT系の最新情報やライフハック情報についてのつぶやき。
久保清隆 facebook
Add to Google Subscribe with livedoor Reader
  にほんブログ村 サラリーマン日記ブログ 戦うサラリーマンへ  人気ブログランキングへ


◆◆このブログのサイトマップへ◆◆