日常ぴよぴよ

ひよこのてきとーブログ

ウェブサイトの依頼をする際に覚えておきたいデザインの名前

      B!     

webデザイン
どうも、シブヤです。

2014年は本業とは別に、ちょいちょいサイトの制作依頼なんかも頂いたりしてたのですが、クライアントの方は基本的にデザイン名を覚える機会もないので「あのー最近ブログとかでも見るあのデザイン!あれがいい!」という感じで依頼を頂くんでござります。

デザインを伝える時に、デザイン名で伝えられるとクライアントも受け手もスムーズだろうなーと思ったので、需要が多くて名前の知られてないデザインをざっくりまとめますでござります。

フラットデザイン

フラットデザインサイト
参考サイト≫oak.is

「のっぺりしたアイコン」「シンプルなやつ」とか依頼されがちなやつです。
グラデーションや立体感、影などが無いデザインのことを言います。

2014年では、「バイラルメディア風SNSボタン」としてよく使われているデザインですね。
ボタンかどうかが分かり辛いデザインとしてデザイナーの間でも賛否が分かれていましたが、最近はユーザーの認知度が高くなったので結構使われてますねー。

ロングシャドウデザイン

ロングシャドウ

フラットデザインに長い影が入った、アイコンなどにしばしば使われるデザインです。
ヘッダーとかロゴだけロングシャドウデザインで作っているサイトはしばしば見かけます。
いっぱい使うのは、サイト全体の光源を意識して影の角度を調整しないといけないので非常に面倒だと思います。

まあ、このデザインを使った依頼を受けたことは無いんですけどね。

ポリゴンスタイル

polygon
参考サイト≫株式会社Gear8

ポリゴンなスタイルのデザインです。
このデザインは最近トレンドになりつつあるデザインで、サイト全体というより、ヘッダー画像の加工としてよく使われている印象です。
うまく使えばかっこいいのですが、なかなか難しいデザインです。

最近、街角の広告やCMとかでもちょいちょい見かけるので、これからトレンドになっていくんでしょうねー。

パララックス

パララックス
参考サイト≫OK Studios

スクロールすると色んなパーツがあっちやこっちやに動くデザイン?です。
1カラムのサイトでよく使われているのですが、とにかくテキストなんか読まずにコロコロしちゃいます。

実装は非常に面倒なのでぼくはやりません。
名前が覚えられないという方は「ラックス!スーパーリッチ!」に「パ」を足すと覚えましょう。

グリッドデザイン

piterest

pinterest風のデザインとも呼ばれるデザインです。
「ブログを作ってくれー」という依頼を頂くと、大半が求めるデザインがこれですね。

グリッドデザインは、画面を無駄なくお洒落に使えて、しかもスマホでも見やすいデザインなのでぼくも好きです。
国内じゃサイボウズ式がナイスグリッド。

フルスクリーンwebデザイン

フルスクリーン
参考サイト≫Locals Apparel

名前の通り、スクリーンいっぱいに表示されるデザインです。
最近はモニターも大きく、キレイになったので、画面いっぱいに表示されるデザインはインパクトがあります。

重さをのぞけば、ファーストビューでユーザーを落としにくいデザインだと思います。
テキスト量が多いとデザインしにくいですが、TOPページだけに実装するのはいいかも知れないですね。

フルスクリーン動画

海遊館
参考サイト≫海遊館

海遊館のHPやばいですね・・・。
背景に動画が流れるだけでなく、パララックスやフラットデザインの要素まで。
元々ネームバリューのある企業はこういうリッチなデザインのサイトを構えると印象強いですね。

あ、「フルスクリーン動画」という名前ですがまだ浸透してなくて、どこかでもっとしっくりくるスタイリッシュな名前に変わる気がしてます。
ぼくが知っているのは「フルスクリーン動画」って名前だったのですが、Youtubeとかを最大化ボタン押したみたいな名前でしっくりきませんよね。

海外の人はいっぱい動画見るらしいのですが、日本人は動画の再生ボタンをあんまり押すイメージないので、勝手に動画が流れる仕組みってのは効果的だなーと思ってます。

レスポンシブデザイン

responsive-web-design
レスポンシブデザインは、PC用で見ている画面をスマホやタブレットのサイズに最適化してくれるデザインです。

これはもうウェブ系の仕事やってる人なら知ってますよね。
でも、ウェブに関わらない人はあまり実感することもないので、まだまだ知られていないみたいなのです。

ウェブ系の人でも、「レスポンシブル!レスポンシブル!」と間違って?言ってる人を見かけますが、本当に間違っているのか曖昧なので指摘しないでおります。
ちなみに「responsible」はGoogle翻訳によると「責任」という意味みたいです。
レスポンシブの綴りはこうです。「responsive」

多分間違ってますよねえ?言ってあげたほうがいいんですかね?

まとめ

ザックリまとめました。
デザインの名前を覚えておくとネットサーフィンしてても「あっこのサイトもこのデザインだ!」と気づけて楽しいですよ。

2015年はポリゴンデザインとグリッドデザインが増えるかなー

この記事を書いたひと

シブヤタクト
シブヤタクト
日常ぴよぴよの運営者です。
都内の会社でSEO担当しながら、イラストレーターや書道家やったりサイトを作ったりしてます。
Twitter:@pochimin02
ぴよたそという無料イラスト素材サイトも運営してます。