どうも、ハガネ屋です。

 

普段僕が、無意識に行っている「Webデザイン」に関することを、
箇条書きにでもしてみようかなーと思います。

言うまでもなく、Webデザインに正解・不正解はありませんし
「売るためのデザインか」「デザインのためのデザインか」によっても違います。

その点で、当サイトは「デザインのためのデザイン」ありきの話になるので
「売るためのデザイン」をお考えの方は、他所をあたったほうが良いかもですね。。。

スポンサードリンク

 

Webデザイン好きのための重要視すべき「4つのポイント」

アイキャッチ画像は必ず、サイトデザインと「調和」させる

そもそも「アイキャッチ」というのは、
TV番組などのCM前後に挿入される短い映像・タイトルクレジットの事です。

アイ(眼)をキャッチ(捕らえる)なので、言葉どおりの意味。

なお、Webデザインにおける「アイキャッチ」と言えば、
各記事の冒頭に挿入している「イメージ画像」のことなどを指します。

 

とはいえ、アイキャッチは必ず用意すべきものではありません。
というか、文章のカラーが決められてしまうだけに、本来慎重に扱うべきものなので。

だって、アイキャッチ画像を使わないWebサイトも山ほどあるじゃないですか。

あれは「特にこだわりが無いから」という場合ももちろんあるんですけど
「読者に文章へ没入して欲しくて、あえて入れない」方も結構いらっしゃいます。

なので、アイキャッチ画像に関しては「各自のご判断で」入れましょう。

 

ちなみに僕はと言えば、幼い頃から「ロゴ」を描くのがとにかく好き
暇さえあれば、学校で使うノートの端っこにロゴを書いて楽しんでいました。

現存する企業のロゴから始まり、自分で考えたオリジナルのロゴまで色々。

そういえば小学校の頃は、オリジナルの漫画も書いていたんですが
同級生に比較にならないほど上手く漫画を描くヤツがいて自信無くしましたね(笑)

その彼は、父親の後を継いでお医者さんやってますけども。

 

で・・・見出しにも書いたとおり「コンセプトとの調和」は大事です。

僕の場合「行き過ぎないドット絵」というか「フラットデザイン」が元々好きで
サイトのトータルデザインにも、それが反映されている(つもり)ではあります。

当サイトって割合的に、風景や人物などの「写真」って少ないですよね。
別に入れても良いんですが、デザイン的にシンプルな画像が合うので多用しています。

あるいは、あえて解像度を落として「ポスター」寄りにしてみたり。
あくまでも、サイトの雰囲気に合わせて使用画像の方向性も決めています。

 

でもって、逆に「写真を多用するサイト」の場合は・・・
当然「写真」がメインです。これで、アイキャッチがシンプルだと浮くでしょう?

というか、写真を多用するサイトである時点で
アイキャッチすら不要かもしれません。文中に山ほど写真が出てくるのであれば。

 

あと、これはあくまでも「デザインのためのデザイン」を軸に考えた場合です。

詳しい説明は省きますが「収益化サイト」等の場合、考え方は根本から異なります。

「買っていただくためのサイト構成」になりますから
画像一つとっても、使いどころに神経すり減らすレベルです。

遥かに難易度は跳ね上がるかと思いますよ(笑)

 

サイトの収益化がメインの場合、気を付けたほうがいいかもしれませんね。
むしろ当サイトみたいな画像の使い方は、避けたほうが良いと思います。

全然、方向性が違いますので。

 

なるべく「原色」を使わない

説明するまでもないとは思いますが、原色ってのは
いわゆる「真っ赤っか」「真っ青」「真っ黄色」「真緑」のことです。

もちろん厳密に言えば、光の三原色(加法混合)は「RGB(赤・緑・青)」
減法混合の三原色は「CMY(シアン・マゼンタ・イエロー)」って事になりますが
当サイト的には、「ドギツイ色使い」というニュアンスでとらえていただければ(笑)

 

一部、前項と考え方的にも似た部分はあるんですが
原色をセンス良く使える方って・・・限られていると思うのです(笑)

当然、僕もセンスに自信なんてありませんので
使い方の難しい「原色カラー」は、日常的にも極力避けてます。

 

そうそう、丁度良いサイトを見つけたので貼っておきますけど。

参考:ファッションセンスがない人は、原色を買った方がいいですよね?|Yahoo! 知恵袋

 

逆に言えば、原色って「目を引きやすい」ので、
文章などにおいて、訪問者の方を「操作」したい時に使われがち。
(これは、Webサイトに限らず「テレビ番組のテロップ」とかも含めて)

 

操作って書きましたけど、悪い意味でとらえないでくださいね。
記事を読みにくる人にとって「要点が分かりやすい」のは、メリットでもあります。

黄色マーカー赤文字」がポッと出てくれば、注目度抜群だし
ここぞ!という時に使う原色ってのは、なんやかんやで役に立つものなので。

 

”なるべく”使わない、というのがポイントです。
差し色で使うから目立つわけであって、全編原色は目が痛くなりますからね。

 

ちなみに、当サイトの場合は「アイキャッチ画像」についても
なるべく原色を避けたものを採用していますし、原色の場合は色彩を落とします。

無論、前項と同じく「デザイン優先」か「収益優先」かで
考え方は変わってきますので、くれぐれも「当サイトの盲信」はオススメしません。

 

ソーシャルボタン等の「世間に認知された色」は、いじらない

当サイトでもサイト内にいくつか設置していますが、
RSS購読はオレンジ、Twitterは水色、Facebookは濃いめの青、ですよね。

あと、流行りのもので言えば「LINE」は黄緑、とか。

企業だと例えば・・・Appleは時代時代でカラーが異なるので難しいですが
Macintosh=レインボー、iMac=スケルトン、Macbook=シルバー、みたいな。

 

ともあれ、これらはもはや「有名になり過ぎてしまった色」ですから
ある意味「いじることを許されない色」と言っても過言ではないのです。

 

マリオ=、カービィ=ピンク、ピカチュウ・パックマン=黄色
リンク・ルイージ=、ソニック・ロックマン=、スライム=水色 などなど。

人気ゲームのキャラクターひとつとっても、色を変えてしまうだけで
売り上げに支障を来たしそうなぐらいの影響力があるのではないでしょうか。

 

「色相環」と「補色」

これまた、かつて憧れを抱いたものの一つに
「インテリアコーディネーター」というのがあります。

というのも、20代前半の頃に勤めていた職場の上司に
インテリアコーディネーターの資格を持った方がいらっしゃったんです。

その人に「自分も興味があります」って何気なく言ったのがキッカケで
インテリアコーディネーター資格の本を譲っていただいたのを覚えています。
(結局、取得の難易度や5年毎の更新手続きやらで、面倒臭くて諦めたんですが)

その頃にというか・・・資格の本に書いてあったかは忘れましたが
「色相環」「補色」というワードに、よくアンテナが引っかかるようになりました。

 

色相環にしても補色にしても、基本的には似たような意味になりますが・・・

「色相環」ってのは「主要な色を円状に並べたもの」のことです。

af0295

 

その色相環の「各色の対面に位置する色」のことを「補色」と呼びます。
読んで字のごとく、お互いを補い合う色ってとこでしょうか。

af0296

上の図で言うと、青の補色「やや濃いめのオレンジ」ですね。
同様に、緑の補色は「ピンク」で、黄色の補色は「紫色」みたいな感じです。

 

まあ実を言うと、先日のアイキャッチ画像も補色を意識してました。

af0293

茶系の色の写真に対して「薄めの青(水色)」を合わせてます。

上記アイキャッチのように、単体だと明らかに弱い色なんだけど
組み合わせの色次第で、まんざらでもない程度には目立たせることが可能です。

 

まあちょっと上記画像は、RGBベースの色相環ですので
CMYKベースである、こちらのほうがしっくりくるかもですね。

af0298

 

総括

色相環・補色など、無理やり小難しい単語を使ってはいますが
基本的には、普段から自然に行っていることを記事にしてみた感じです。

ただ、補色なんて毎回毎回考えているかと言うと、そうでもなくて
直感で「これかな?」と思うデザインを採用しています。あまり悩みません。

というか、悩み始めてしまうとキリが無くなってしまい
記事に割ける時間が奪われることになるので、全くおすすめしません。

 

比較的「デザイン押し」の当サイトですら、
優先的に考えているのは「記事」です。記事ありきのWebデザイン。

デザインに凝り過ぎるがあまり、記事の更新が滞ってしまうのだけは
くれぐれも気を付けましょう(お互い)。別にモデルハウス作ってるわけじゃないし。

スポンサードリンク