どうも、ハガネ屋です。
普段僕が無意識に行っている Webデザインに関することを、箇条書きにでもしてみようかな～と思います。
言うまでもなく Webデザインに正解・不正解はありませんし、売るためのデザインかデザインのためのデザインかによっても違います。
その点で、当サイトはデザインのためのデザインありきの話になるので、売るためのデザインをお考えの方は他所をあたったほうが良いかもですね・・・
Webデザイン好きのための重要視すべき「４つのポイント」
アイキャッチ画像は必ず、サイトデザインと「調和」させる
そもそもアイキャッチとは、TV番組などの CM前後に挿入される短い映像・タイトルクレジットの事です。
アイ（眼）をキャッチ（捕らえる）なので、言葉どおりの意味。
なお Webデザインにおけるアイキャッチと言えば、各記事の冒頭に挿入しているイメージ画像を指します。
とはいえ、アイキャッチは必ず用意すべきものではありません。
というか文章のカラーが決められてしまうだけに、本来慎重に扱うべきものなので。
だって、アイキャッチ画像を使わない Webサイトも山ほどあるじゃないですか。
あれは「特にこだわりが無いから」という場合ももちろんあると思いますけど、読者に文章へ没入して欲しくてあえて入れない方も結構いらっしゃるのではないでしょうか。
なので、アイキャッチ画像に関しては各自のご判断で入れるかどうか決めてください。
ちなみに僕はと言えば幼い頃からロゴを描くのがとにかく好きで、ヒマさえあれば学校で使うノートの端っこにロゴを書いて楽しんでいました。
現存する企業のロゴから始まり、自分で考えたオリジナルのロゴまで色々。
そういえば小学校の頃はオリジナルの漫画も書いていたんですが、同級生に比較にならないほど上手く漫画を描くヤツがいて自信無くしましたね（笑）
その彼は、父親の後を継いでお医者さんやってますけども。
で・・・見出しにも書いたとおり「コンセプトとの調和」は大事です。
僕の場合、行き過ぎないドット絵というかフラットデザインが元々好きで、サイトのトータルデザインにもそれを反映しているつもりです。
当サイトって割合的に、風景や人物などの写真って少ないんですよね。
別に入れても良いんですが、デザイン的にシンプルな画像が合うので多用しています。
あるいは、あえて解像度を落としてポスター寄りにしてみたり。
あくまでも、サイトの雰囲気に合わせて使用画像の方向性も決めています。
でもって、逆に写真を多用するサイトの場合は、当然 "写真" がメインです。これでアイキャッチがシンプルだと浮くでしょ？
というか、写真を多用するサイトの時点でアイキャッチすら不要かもしれません。文中に山ほど写真が出てくるのであれば。
あと、これはあくまでも "デザインのためのデザイン" を軸に考えた場合です。
詳しい説明は省きますが収益化サイトの場合、考え方は根本から異なります。
買っていただくためのサイト構成になりますから、画像一つとっても使いどころに神経すり減らすレベルです。
遥かに難易度は跳ね上がるかと思いますよ（笑）
サイトの収益化がメインの場合、気を付けたほうがいいかもしれませんね。
むしろ、当サイトみたいな画像の使い方は避けたほうが良いと思います。全然方向性が違いますので。
なるべく「原色」を使わない
説明するまでもないとは思いますが、原色というのはいわゆる真っ赤っか・真っ青・真っ黄色・真緑のことです。
もちろん、厳密に言えば光の三原色（加法混合）は RGB（赤・緑・青）で減法混合の三原色は CMY（シアン・マゼンタ・イエロー）って事になりますが、当サイト的には、ドギツイ色使いというニュアンスでとらえていただければ（笑）
一部 前項と考え方的にも似た部分はあるんですが、原色をセンス良く使える方って限られていると思うんです。
当然僕もセンスに自信はありませんので、使い方の難しい原色カラーは、日常的にも極力避けてます。
そうそう、丁度良いページを見つけたので貼っておきますけど。
参考記事
ファッションセンスがない人は、原色を買った方がいいですよね？｜Yahoo! 知恵袋
逆に言うと原色は目を引きやすいので、文章などにおいて訪問者の方を "操作" したい時に使われがち。
（これは Webサイトに限らず、テレビ番組のテロップとかも含めて）
操作って書きましたけど、悪い意味でとらえないでくださいね。
記事を読みにくる人にとって、要点がわかりやすいのはメリットでもあります。
黄色マーカーや赤文字がポッと出てくれば注目度抜群だし、ここぞ！という時に使う原色ってのは何やかんやで役に立つものなので。
”なるべく” 使わない、というのがポイントです。
差し色で使うから目立つわけであって、全編原色は目が痛くなりますからね。
ちなみに当サイトの場合は、アイキャッチ画像についてもなるべく原色を避けたものを採用していますし、原色の場合は色彩を落とします。
無論、前項と同じく "デザイン優先" か "収益優先" かで考え方は変わってきますので、くれぐれも当サイトの盲信はオススメしません。
ソーシャルボタンなどの "世間に認知された色" は、いじらない
当サイトでもサイト内にいくつか設置していますが、RSS購読はオレンジ・Twitterは水色・Facebookは濃いめの青ですよね。
あと、流行りのもので言えば『LINE』は黄緑。
企業だと例えば・・・Appleは時代時代でカラーが異なるので難しいですが、Macintosh＝レインボー・iMac＝スケルトン・Macbook＝シルバーみたいな。
ともあれ、これらはもはや有名になり過ぎてしまった色ですから、ある意味 "いじることを許されない色" と言っても過言ではありません。
例えば、ゲームキャラクターの場合↓
- マリオ＝赤
- カービィ＝ピンク
- ピカチュウ・パックマン＝黄色
- リンク・ルイージ・ヨッシー＝緑
- ソニック・ロックマン＝青
- スライム＝水色
人気ゲームのキャラクターひとつとっても、色を変えてしまうだけで売り上げに支障を来たしそうなぐらいの影響力があるのではないでしょうか。
「色相環」と「補色」
これまた、かつて憧れを抱いたものの一つに "インテリアコーディネーター" というのがあります。
というのも、２０代前半の頃に勤めていた職場の上司にインテリアコーディネーターの資格を持った方がいらっしゃったんです。
その人に「自分も興味があります」って何気なく言ったのがキッカケで、インテリアコーディネーター資格の本を譲っていただいたのを覚えています。
（結局、取得の難易度や５年ごとの更新手続きやらで、面倒くさくてあきらめたんですが）
その頃にというか・・・資格の本に書いてあったかは忘れましたが、"色相環" や "補色" というワードによくアンテナが引っかかるようになりました。
色相環にしても補色にしても、基本的には似たような意味になりますが・・・
色相環とは、"主要な色を円状に並べたもの" のことです。
その色相環の各色の対面に位置する色を "補色" と呼びます。
読んで字のごとく、お互いを補い合う色のことです。
上の図で言うと、青の補色は "やや濃いめのオレンジ" ですね。
同様に、緑の補色は "ピンク" で、黄色の補色は "紫色" みたいな感じです。
まあ実を言うと、先日のアイキャッチ画像も補色を意識してました。
茶系の色の写真に対して、薄めの青（水色）を合わせています。
上記アイキャッチのように単体だと明らかに弱い色なんだけど、組み合わせの色次第でまんざらでもない程度には目立たせることが可能です。
まあちょっと上記画像は RGBベースの色相環ですので、CMYKベースであるこちらのほうがしっくりくるかもですね。
総括
色相環・補色など無理やり小難しい単語を使ってはいますが、基本的には普段から自然に行っていることを記事にしてみた感じです。
ただ、補色なんて毎回毎回考えているかと言うとそうでもなくて、直感で「これかな？」と思うデザインを採用しています。あまり悩みません。
というか悩み始めてしまうとキリが無くなってしまい、記事に割ける時間が奪われることになるので全くおすすめしません。
比較的デザイン押しの当サイトですら、優先的に考えているのは記事です。記事ありきのWebデザイン。
デザインに凝り過ぎるがあまり、記事の更新が滞ってしまうのだけはくれぐれも気を付けましょう（自戒を込めて）。別にモデルハウスを作っているわけじゃないし。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします