Webデザイナーがこっそり教える4つのテクニック

初めまして、入社2年目のニシです。 漫画が好きなアラサーです。すぐ本棚がいっぱいになるので定期的に売っぱらっています。人生を変えた漫画はプラネテスです。アニメは見ていません。 今回は、Webデザイナーがよく使うデザインテクニックを4つご紹介します。 「ノンデザイナーでもいい感じにできるデザインテクニック」とも言います。 ぜひこれを読んで活用してください。 目次 英語表記を加える 罫線でアクセントをつける アイコンを加える 写真を使う 1. 英語表記を加える 定番ですね。見出しとかロゴとか困ったら添えちゃう。 ありふれたデザインにならないようにするのが難しいけど、やっぱり英文かっこいい。 と、頻繁に使われるテクニックです。 たとえば以下のような感じ。 文言を置いただけの見出し(左)に英文を添えると、土台が出来て安定感が出ますね(右)。色やフォントや配置にも手を加えるとさらによさそう。 綴りを間違えるととっても恥ずかしいので注意しましょう。 参考サイト 英文にさらに工夫を凝らしたサイトを2つご紹介します。 マツオカそらいろクリニック 英文字が象形文字のようなイラストになっている、手の込んだサイトデザインです。ロゴの書体に合わせているようです。 これ全部作ったのかな・・・すごいですね・・・。 MORE SMART SERIES 背景に商品名(英文)をアニメーションさせたヒーローイメージ。これは真似できない。 スクロールすると表示される英文の配置も効果的です。もはや添えてない。こんなふうに英語をテクスチャ代わりに使ってしまうというのもひとつの技ですね。 2. 罫線でアクセントをつける 便利です、罫線。区切ったり強調したりと大活躍です。 なんか画面が締まらないな・・・という時に罫線を入れるだけでデザインがピシッと決まったりします。 たとえば以下のような感じ。 右のように罫線を加えるだけで「ここが見出しだな」と目が留まります。英文を添えた場合と似たような効果があります。 罫線の代わりに1.の英文添えを使って同じ効果を出すというテクニックもあります。 線を右寄せにしたり、左寄せにしたり、縦にしたり、斜めにしたり、いろいろ手法があるので試してみましょう。 でも太さと色と長さが難しい。単純に見えて奥が深い、罫線。 参考サイト 罫線をさらに効果的に使ったサイトを2つご紹介します。 asoview! 見出しの上やキャッチコピーの横などに効果的に罫線が使われています。視線の動きを予測した縦罫線の使い方に唸ります。記事リンクのホバーアニメーションの罫線もいい仕事をしています。 代官山綜合法律事務所 罫線を図形のように扱い、さらにアニメーションさせています。線だけでここまで演出できるなんて、脱帽。シンプルな線だからこそ配置に高いセンスがあらわれています。 3. アイコンを加える 写真使うほどでもないけど、このままだと画面がちょっと寂しいなあというときに使えるのが、アイコンです。アイコンを配置するだけで、ユーザの視線の動きをコントロールできます。 グローバルナビ、リンク、ポイントの説明など、シンボルとしてもよく使われます。 たとえば以下のような感じ。 アイコンを追加すると(右)、パッと見ただけで何を表しているかが伝わります。小さくて目立たないリンクなども、アイコンを追加すれば認識率がアップします。 アイコン、自分で作るのめんどくさいなあと思っていましたが、無料で素材配布してるサイトもたくさんありますので、デザインに慣れるまでは無料素材を使うのもありです(慣れてくると、探すより自分で作ったほうが早い)。 参考サイト アイコンをさらに効果的に使ったサイトを2つご紹介します。 aoはり治療院 あちこちで使われているアイコンが可愛らしい雰囲気を演出しています。「6つのポイント」の説明に使われているイラストやリンクアイコンなど、クオリティが高い。こういうイラストをパパッとかけるとデザインの幅が広がりますよね。 株式会社AROUND … Continue reading Webデザイナーがこっそり教える4つのテクニック