ホームページ制作Fの業務を月ごとにご紹介

2015年3月31日(火)
魅力あるタイトルの付け方!3つの差別化ポイントとは?

魅力的なタイトル「例:ごみプロ日本様」


ホームページやブログで、1番最初に見られるのがタイトルです。

あなたも魅力的ではないタイトルや、自分には関係がないなと思った時点で、すぐに閉じてしまいますよね。

続きを読んでもらうためにも、タイトルは非常に重要な部分になります。


ということで、今回はタイトルの付け方について、人を引きつける差別化ポイントを3つあげてみました。



1.具体的な数字を入れる


タイトルに数字を入れることで、具体的なメッセージとなり、信頼感がグンッと上がります。


数字を入れない:「高円寺を楽しむ理想の新生活」


数字を入れると:「高円寺を3倍楽しむ理想の新生活」


いかがでしょうか?3倍という具体的な数字が入ることで、続きを読んでみたい!と感じたと思います。


魅力的なタイトル「例:ダントラスト様」


2.1人のお客様に語りかけるように


タイトルを考えるときは、見てくれている人を具体的にイメージして、その人に語りかけるようにしましょう。

相手が普段使っている言葉を使うことで、考えさせずに続きを読んでもらうことができます。

ホームページの入口から普段使わない言葉が出てくると、続きを読む気がしなくなりますよね。


そして、1人のお客様と話すときに、「皆様」や「困っている方」や「悩んでいる方」などは使わないですよね。

なので、タイトルを考えるときには、「あなた」を入れるようにしましょう。
そこを気をつけるだけでも語りかけるようなタイトルになります。


普段言わない :皆様の理想と想像のライフスタイルを見つけ出す!


普段使っている:あなたの理想と想像のライフスタイルを見つけ出す!



3.感嘆符や疑問符でひきつける


感嘆符や疑問符をつけるだけでも魅力的なタイトルになります。
相手に強いインパクトを与えることができますので、前半・後半で区切るときや、最後につけることはオススメです。


感嘆符なし:30年以上の実績 低価格で立派なご葬儀を


感嘆符あり:30年以上の実績 低価格で立派なご葬儀を!


魅力的なタイトル「例:葬儀関西葬祭センター様」

以上、魅力的なタイトルを付けるための3つの差別化ポイントでした。

タイトルを工夫することでアクセス数が2倍も3倍ものびることもあります。
まだまだタイトルの付け方だけでも色々なテクニックがありますので、
今後も引き続き学びながらここで紹介できればなあと思います。


2015年3月30日(月)
色が偏っている写真の色を補正する方法

写真を撮ってみたものの、照明の加減などで色が偏ってしまった場合、
そのまま使用するのは難しくなってきます。

その時、画像補正をかけて自然な感じに仕上げないといけません。
黄色い画像

ここまで色が偏っている場合、個別の色を補正していくというよりは
全体の色を変えていかなければいけないので、
まず「色温度」と「色かぶり補正」を使用してできる限り自然な色になるようにします。
色温度と色かぶりを補正

次に、ハイライト部分とシャドウ部分の補正を行います。
調整してできる限り自然な色合いになるようにします。
ハイライトとシャドウを調整

次に、カラーキャリブレーションにあるシャドウ部分の色かぶり補正と
それぞれの色相の調整を行っていきます。
カラーキャリブレーションの補正

最後に細かい調整を行って完成です。
修正後の画像

※今回はlightroomというソフトを使用しました。

2015年3月27日(金)
Illustratorで画像を半透明にする

半透明にした画像
バナーなどでよく見かけるこの方法。簡単に作る事ができます。
半透明マスク前の画像
まず、半透明にしたい画像と、黒白のグラデーションが掛かった図形を用意します。
グラデーションの黒い部分が消えて白い部分が残ります。
RGB黒
RGB白
グラデーションの色は[RGB]で数値を端まで寄せて、真っ黒、真っ白になっていることを確認します。
半透明マスク前の画像
グラデーションの図形を写真の上に乗せます。
透明ダイアログ
「透明」ダイアログから「不透明マスクを作成」を選択します。
不透明マスク後の写真
半分が透けて見えるようになりました。
グラデーションダイアログ
不透明マスク完成
グラデーションのバーを変えることで、透明になる範囲を変えることができます。

2015年3月26日(木)
実は違う?間違いやすい敬語と正しい使い方 その2

前回、こちらの記事で敬語の間違った使い方をまとめましたが
今回は第二弾ということで、引き続き間違いやすい敬語と正しい使い方についてまとめました。


間違った使い方と正しい敬語


1.「休みをいただいております」はおかしい


よく、休んだ社員の代わりにお客様に電話やメールを送る時に、「Aは本日お休みをいただいております」
などと言う時がありませんか?
実はこれは間違いで、自分の会社の社員が休んでいる場合なので
「お」という丁寧語を使うことはNGです。
また、「いただいております」は、相手から与えてもらうという意味がありますが、
この場合、「Aさんが自社から休みをもらう」という意味になります。
お客様に対して説明する場合、「いただく」という自社を持ち上げた表現をするのは間違った使い方になります。

【正】・・・「Aは本日休暇を取っております」「Aは本日休みを取っております」
もし、上記の表現がストレートすぎて言いづらい場合、文頭に
「申し訳ございませんが」「あいにくですが」など一言添えるといいと思います。


2.ついつい言ってしまう「すみません」


相手に謝罪する時、よく「すみません」と言ってしまいがちです。
元々の「すみません」の意味は、
《動詞「す(済)む」の連用形+丁寧の助動詞「ます」の未然形+打消しの助動詞「ん」》で
「すまない」の丁寧語で、相手への謝罪、感謝、依頼を表します。
「ごめんなさい」よりも反省の意が伝わってくるとはいえ、あまり多用しすぎるのはどうかな・・と思った時
「申し訳ございません」、「申し訳ありません」を使うのが良いと思います。

ただ、「申し訳ない」は敬語ではありませんのでご注意ください。

・「ごめんなさい」と「すみません」と「申し訳ございません」の違い
ごめんなさい・・・「どうか免じてください」という意味の「御免なさい」から来ているので、
「要求」の意味も含まれており、あまり申し訳無さが伝わりません。

・すみません・・・「謝るだけでは済まない」という意味になるので
相手に求めていない分、「ごめんなさい」よりも反省の度合いが強いです。

・申し訳ございません・・・「言葉では表せないほど反省している」という意味になるので
「すみません」より反省度が高くなります。

3.「どちらにいたしますか?」はNG

2つのものをお客様に選んで貰う場合、 「AとBどちらにいたしますか?」と聞きがちですが 「いたす」は「する」の謙譲語になり、この場合選ぶのは相手になるので 「する」の尊敬語「なさる」を使用します。

【正】・・・「AとB、どちらになさいますか?」


正しいと思って使っている敬語ばかりですが、改めて考えると
確かに違和感があるなあと思った箇所がたくさんありました。
皆さんも、一度よく使う敬語について見なおしてみましょう。

2015年3月24日(火)
写真をスライドで見せる場合のスライドデザイン

多くの写真を大きさを損なわないまま見てもらいたい時には
縦や横に写真を配置しただけではとてもページが間延びしてしまうのでスライド機能を使うと思います。

スライド部分の見せ方はよく見かけるもの以外にもいろいろな出し方がありますので弊社の実績から一部を紹介します。

枚数分の黒丸でスライドであることを表現

よくある、写真下部の黒丸と左右への矢印で切り替えるタイプです。 同じようなシーンを複数枚スライドする時などに適しています。 黒丸のスライド

左右の矢印のみで表現

実績など、数が多いことをアピールしたい、一覧ページに誘導したい、などという 場合は枚数(件数)を示す黒丸などのサインはない方が効果的です。

「こんなにたくさんある、実績のページに行ってみよう!」と思って貰えれば成功です!
左右だけのスライド

文字をクリックしたら該当の写真が出現

写真の場面を文字で説明しているパターンです。これは写真だけを見ていても、 チラッと文字を見たら自分が何の写真を見ているかもわかります。

写真自体に文字を入れても悪くないのですが、見たい場面をクリックして写真を見れるという
楽しさもありますので、場面を名称で表せれる場合は面白いかもしれません。
文字クリック式のスライド

見たい写真(図)をクリックしたらスライドで詳細が出現

家など、まず外観から選べる場合はサムネイル写真を用意するとわかりやすいです。 思い切って左右のボタンも付けず、時間経過のスクロールもせずサムネイル写真の クリックだけでスライドします。 クリックしたら詳細が見れるので、なんだか一個見たら全部見たくなります! サムネイルクリックでスライド

以上、ホームページの動きの基本?であるスライドについてでした。
多すぎると鬱陶しくなってしまいますが、上手く使って楽しいページを作りましょう!

2015年3月23日(月)
はんこを押したようなかすれた表現にする方法


今回は不透明マスクを使ったはんこを押したような表現を出す方法をご紹介します。

まずはオブジェクトを作成します。オブジェクトが複数の場合はあらかじめグループ化をしておきます。
はんこのような表現1.jpg

そして右上のメニューから「不透明マスクを作成」をクリックします。
すると画像のような表示になります。
はんこのような表現2.jpg

次にブラシメニューから、

「ブラシライブラリを開く」→「アート」→「アート 木炭・鉛筆」を選択し

その中の「チョーク」を選択します。

次に不透明マスクのダイアログボックスの「クリップ」にチェックを入れます。

チェックを入れると、ダイアログボックスの白い部分が黒に反転し、オブジェクトが消えます。

はんこのような表現3.jpg

そして線を白色に選択し、オブジェクトをなぞると・・・・・

はんこのような表現4.jpg

このようなかすれた表現が簡単にできちゃいます!


ぜひぜひ使ってみてください!

2015年3月20日(金)
EC CUBEとMTを連動する

EC CUBEにMTを導入する際のrssfeed.tplを作成して導入する方法です。
ECとMTの連動

まずMTのインデックステンプレートでrssfeed.tplを作成します。

MTの記述

中には表示したい内容を記載します。
今回はリストで日付+タイトルを5件表示する設定です。

書き出しの設定は

・出力ファイル名→rssfeed.tpl(階層が異なる場合も有ります)
・テンプレートの種類→カスタムインデックスプレート


で保存と再構築をします。


つぎにEC CUBEのブロックで

EC CUBEブロック設定

rssfeed.tplの記述をするだけでOKです!
難しいようで簡単!です!!

2015年3月18日(水)
複数ページのpdfファイルをイラストレーターで修正・保存する時のポイント

複数ページのpdfファイルをイラストレーターで開こうとすると、このような画面がでてきます。
イラストレーターで複数ページのpdfを開く
基本的にイラストレーターは1ページ分のpdfファイルしか保存できません。
そのときも、容量削減のため「保存形式:pdf」でオプション「illustratorの編集機能を保持」チェックを外す必要があります。
pdf保存オプション
ちなみに「Web表示用に最適化」はWebサイトにアップされたpdfを閲覧するとき、全てのデータを読み込まなくても、読み込んだところから順次閲覧できるようにする、というものです。ほとんど容量に影響をあたえません。

つまり、複数ページのpdfファイルをイラストレーターで保存する場合、
・「別名で保存」すると、編集したページしか保存できない。
・「保存」すると、複数ページの体裁は保持できるが、容量削減に必要なチェックをはずせないため、
 大容量ファイルになる可能性が高い。
そのため、軽い容量のまま複数ページpdfができない、ということになってしまいます。

そこでオンラインの強力な味方、PDF結合を使います。
smallpdfのサイト
あらかじめページ数分のpdfを用意しておけば、Acrobatと同じように複数ページのpdfを生成してくれます。

たとえば、4ページのパンフレットpdfで、2ページ目だけ修正するとしましょう。
まず、ひとつひとつのページをpdf保存し、連番形式の別名に変更しておきます。
もちろん2ページ目は修正したうえで別名・連番形式保存しています。
連番保存の例
もし、2ページ目の容量が大きい場合、pdf結合の上の部分から「pdf圧縮」を選んで、pdfファイルをドラッグ&ドロップすれば、Web用に都合のいい圧縮をかけてくれます。
pdf圧縮
ただし、画像のスクリーンショットなど、わずかなボケも許されない画像が含まれているpdfにはむきません。
圧縮して画素が荒れてもよい画像かどうか、確認の上で使いましょう。

あとはpdf結合にすべての連番pdfをドラッグ&ドロップし、
結合されたpdfファイルをダウンロードすれば終了です。
可能な限り変更部分の容量を軽くしたうえで、複数ページ形式のpdfが作成できると思います。

2015年3月17日(火)
キャッチコピーを考えるときにやっている3つのこと

1.ターゲット(お客様)を明確にする


ターゲットを明確にしないと、
誰にもつきささらないコピーになります。
まずはターゲットをイメージしましょう。

ターゲットを明確にする

2.ターゲットが悩んでいることを書き出す


実際に体験したり、ターゲットに合って話を聞いたりするのが良いのですが、
時間がないときに便利なのが、ヤフー知恵袋や教えて!gooなどの悩み投稿サイトです。
悩みを検索することもできるので、キャッチコピーを考えるときはオススメです。
ターゲットが一体何に悩んでいるのかをメモしましょう。
フレーズをリライトしながら書き出すと相手の気持が分かるようになります。
時間をかけて沢山の声を集めましょう。

ターゲットの悩みを書き出す

3.相手の気持ちになりきる


フレーズをつなぎ合わせてコピーを考えます。
この時に必要なのは、相手の気持ちになりきることです。
その言葉は見てくれたお客様の心に突き刺さるのか?
その言葉で、次を、続きを読みたいと思うのか?


自分の頭のなかだけで考えた言葉では、
反応が上がるコピーは出来ないと思います。


どれだけターゲットのことを理解して、
ターゲット目線でターゲットに伝わる言葉を考えられるのか・・・

相手の気持ちになりきる


とても奥が深いなあと思いながら
コピーを考えるのに日々格闘しています。


コピーを考えるときに意識している3つのことでした。


2015年3月16日(月)
床に写真が写り込んだような処理を簡単に作る

物体が床に写り込んだような処理をお手軽にできる方法をご紹介いたします。

元の画像

まず、上下反転させた画像をコピーします。

反転コピー
設定画面

逆さまにした画像の透明度を下げます。

反転した画像を半透明にする

グラデーションのオブジェクトを作り、不透明マスクを作成します。

不透明マスクの設定

これで床に写り込んだような画像を簡単に作成できます。

鏡面画像完成

2015年3月13日(金)
Photoshopで周りに白枠を付ける

写真を切り抜いたけど、なんか素っ気ないなと思われた方に簡単に白枠を付ける方法を紹介します。
境界線を付ける前の画像
ペンツールで家を切り抜きました。これでは味気ないですね。もう一工夫ほしいところです。
レイヤーダイアログ
「レイヤーダイアログ」から白枠をつけたいレイヤーをダブルクリックします
レイヤースタイルボックス
レイヤースタイルのウインドウが開かれます。
「境界線」の項目を上の様に変更します。
境界線をつけた画像
簡単に白枠を付けることが出来ました!

2015年3月12日(木)
WordPressで選択されているページのメニューの色を変える方法

ウェブサイトを閲覧しているとき、このようにメニューの色が変わっていると、
自分が今どのページを見ているかが分かりやすくなりますよね。
今居るページのメニューが選択された状態のグローバルメニュー

実はこれがWordPressだと、ちょっとコードを書き加えるだけで簡単にできてしまうのです。


WordPressのカレント表示を活用しよう

WordPressでは以下のコードを追加すると、選択されているページに
自動的に【class="current"】と追加させる機能があります。


この機能を使い、今回はこの用意したメニュー用のコードの、「こだわり」の部分で実装してみます。
まずはサイドメニューのコードを用意。
サイドメニューのコード


次に、メニューのコードを以下のように変更。
カレント記述を追加したコード

変えたコードのみ抜粋するとこんな感じです。

<li class='li_'>ロードのこだわり</a></li>



<li class='li_ <?php if ( is_page('kodawari') ) { echo ' current'; } ?>'><a href='<?blogInfo('url');?>/kodawari.html'>ロードのこだわり</a></li>


ちなみに【is_page('programming')】は現在見ているページの情報を取得する関数です。

<?php if ( is_page('kodawari') ) { echo ' current'; } ?>'>
と記述した場合は、「kodawari」のページだったら【class="current"】を出力してという指示になります。


これでテーマの更新をしてみて、もう一度こだわりのページを見てみます。


今回は以下のように色を変えることができました。
今居るページのメニューが選択された状態のサイドメニュー


ソースを表示すると、こだわりのページのみ【class="current"】が入っていますね。
カレント表記が追加されたhtml


あらかじめ選択された状態のデザインはCSSに事前に設定しておいてくださいね。
プラグインの導入など面倒な作業も必要無いので、WordPressユーザーの方は是非お試しください!

2015年3月11日(水)
実は違う?間違いやすい敬語と正しい使い方

弊社では、お客様とのやりとりは電話とメールで主に行っています。
たまに、お客様とのやりとりのメールや自分が電話でお客様に話す言葉遣いについて
「あれ?」となったので、自分的に使い方を間違いやすい敬語と、正しい使い方についてまとめました。
もし、当てはまるような言葉遣いをしていましたら、これを機会に覚えてみてはいかがでしょうか!

間違いやすい敬語と正しい使い方

1.社長様の「様」は要らない

たまに、メールや電話などで「社長様」と言われることがあると思いますが
実は「社長」自体が敬称を表す言葉なので、「様」は付けなくても良いのです。
つまり、「社長」に「様」がついてしまうと、二重敬語になり、ビジネスで使うにはふさわしくありません。
ですので、「社長の○○様」や、「代表の○○様」などと表現した方が無難です。
お名前がわからない場合ですと、「代表者様」で良いのではないでしょうか。


2.「させていただく」の多発はあまり良くない

「させていただく」の本来の使い方は
"基本的には自分が行うことを、
(1)相手側や第三者の許可を受けて行い、
(2)そのことで恩恵を自分が受けるという事実や気持ちのある場合
に使われる。"
とのことです。

つまり、許可を受ける相手がいなければ、「~させていただく」という言葉は、適切ではありません。

例1:【誤】「説明させていただきます」
頼んでもいない状況で、「説明させていただきます」と言うのは、強引な印象になってしまいます。
→【正】「説明いたします」

例2:【正】「頒布会のご案内を送らせていただきます」
この場合は、「送っていいかの許可がないのに、勝手に送って申し訳ない」という意味で
「送らせていただきます」と表します。


3.少しの質問で良い時は「ご教示ください」の方が正しい

お客様に、不明な点を質問する場合「ご教授ください」とつい言ってしまうことはありませんか?
「ご教授」と「ご教示」では、だいぶ意味が違ってきます。

【教授】・・・特定の技芸・学問について教え授ける。長期的なものになります。
【教示】・・・教えること、伝達すること。

と、「ご教授」の場合ですと、意味の重たいものになってしまいます。
ですので、ちょっとした聞きたいことであれば「ご教示ください」の方が正しい言葉遣いになります。


今回は3つしか紹介できなかったのですが、また後日調べて
他の言葉も紹介出来ればと思います。

2015年3月10日(火)
付箋風見出しの作り方

今回は付箋を貼ったような見出しの作り方を紹介します。
使用用途は見出しだけでなく、ちょっとした写真の説明や補足など
動きを持たせながらワンポイントになるのがいい感じです!

普通に付箋っぽく四角を置いただけですと、こうなります。
付箋の元

ただのドロップシャドウをかけただけですと、
まあ立体的に見えなくはないのですが付箋感はイマイチありません。
影を付けた付箋

やはり、付箋はぺらっとめくれてて欲しい!ということで、
このように一部だけ影を付けてみると、こうなります!
めくれたように見せる付箋

こちら、付箋の端っこがめくれたように見えますが実はただ、そのままの四角の画像に
三角形の影をつけただけです。
めくれたように見せる方法
見出しの四角のオブジェクトはまっすぐのまま、まったく曲がっていないのに
ぺらっと曲がって見えます。便利!

是非お試しください。

2015年3月 9日(月)
華やかな雰囲気のタイトルバーをつくる


タイトルバーがなんとなくいまいちデザインが決まらないときに
是非お試し下さい。

タイトルバーノーマル.jpg
まず、素材をつかって気になる隙間を埋めてみましょう。
すごくうっすらした方が文字も目立って自然に見えると先輩に教わりました。
タイトルバー素材つき.jpg

すこし華やかになりました。

ちょっとまだ物足りないなってときは影をつけてみましょう!
ドロップシャドウ以外にも使う手があります!

まずはバーの下に好きな色のグラデーションを敷きます。
こんな感じに。。。
タイトルバー影付け前.jpg
そしてグラデーションの不透明度を下げます。
タイトルバー影付け後.jpg
するとなんとなくタイトルっぽい雰囲気になったと思います!
これで文章との差が出て見やすいサイトになりますね!ぜひ使ってみて下さい!

2015年3月 5日(木)
テクスチャの使い方について

デザインをしていて、パーツなどを作っているときに、何か物足りないな...と感じることがあります。
たとえばこちら
0305_1-01.jpg
文字にポイントを付けたり、きらきらしたモチーフを足したりして、麗めな雰囲気になっています。
でも地のベージュがべたっとしているせいで、なんとなく安っぽく見えてしまう気もします。
そういう時にやっぱり役に立つのがテクスチャです。
ということで背景にテクスチャを貼ってみます。
0305_2-01.jpg
テクスチャ100%です。
確かに質感は出ましたが、ちょっと明るすぎるかなという感じが...
そこで、地の上に薄くテクスチャを重ねてみましょう。
まずは地の色ですが、先ほどの色では少し濃すぎるので、トーンを落とした色にします。
0305_3-01.jpg
あとで調整できるので、とりあえず適当に色を決めます。
そこにアピアランスで新しい塗りを追加し、先ほどのテクスチャを乗せます。
0305_4_.jpg
テクスチャのレイヤーモードを「乗算」にします。
すると、地の塗りの上にテクスチャが重なり、高級感のある雰囲気になりました!

今回はテクスチャ自体がそれほど濃くなかったので「乗算100%」ですが、
テクスチャの強さや色味に合わせて、レイヤーモードを「ソフトライト」にしたり、
不透明度を下げたりして、うまく調整してみてください。
テクスチャを要所要所でうまく使えると、ホームページ全体のイメージも
ぐっと雰囲気が良いものになるので、いろいろと実験してみるといいのではないでしょうか。

2015年3月 4日(水)
オブジェクトを再配色(ライブカラーの変更)について

グラデーションや複数オブジェクトの色を雰囲気を保ちながら変更できる機能です。

使い方は「編集」→「カラーを編集」→「オブジェクトを再配色」を選択。
今回は、三つのオブジェクトのグラデーションを変更します。
20150304-setumei1.png
このような画面が出てきます。この画面から「編集」を選びます。
20150304-setumei2.png
「ハーモニーカラーをリンク」を選択。
20150304-setumei3.png
一番大きな円を動かすと、その動きに応じてほかの小さな円(ほかの色)も動く。
真ん中のスライダーを動かして、カラーホイールにない要素を調整。
なかなか派手に見た目が変わりました。
20150304-setumei4.png
カラーバリエーションを作ったり、グラデーションの変更などに使える機能です。

この機能、メニューでは「オブジェクトを再配色」となっていますが、
「取り消し」「やり直し」の部分では「ライブカラーの変更」と表示されます。
undo-livecolor.png
ちょっとややこしいので気を付けましょう。

2015年3月 3日(火)
Illustratorで可愛いボタンを作る

イラレで少し工夫して可愛いボタンを作成してみたいと思います。

四角のボックスに見出しと説明文と画層を配置

まずは、四角のボックスを用意してその中に、見出しと簡単な説明文と画像を配置しました。

見出しと詳しくはこちらを四角で囲い色分け

そして、見出しと「詳しくはこちら」を四角で囲い色分けをしてみました。
これでも良いのですが、角々しているので丸みあるボタンに修正します。

角を丸くする方法

ボックスを選択して、アピアランス→スタイライズ→角を丸くするを選ぶと、

角を丸くするダイアログ

角を丸くするダイアログが表示されます。今回は5pxで設定しました。

ボックスの下の部分が丸くなる

まだ上の部分が角ばっているので、これを丸くしていきます。

上部分の丸みを作る

見出しの部分の枠を、四角と丸くしたボックス2つを用意します。

重ねあわせクリッピングマスクを作成

これを重ねあわせて、クリッピングマスクを作成を選択します。

上部分だけが丸いボックスが完成

すると、上部分だけが丸くなったボックスが出来上がります。

イラレで作る可愛らしいボタンの完成

イラレで作る可愛らしいボタンが完成です。
写真の白枠も付けてみました。
大きなボタンやバナーを作成したいときの参考になればうれしいです。

2015年3月 2日(月)
とっても便利な配色サイトのご紹介

デザインをしながらいつもすごく悩むのが、色!
色だけでもたくさんあるのに配色までってなると、選ぶのに本当に苦労しますよね・・・・
でも色で人や企業の印象が決まってしまうくらいなのでやはり慎重に選びたいものです。
なぜここまで断言できるかというと、ある実験で重要性が証明されているから!なのです(私も驚きました。)

「人の購買軸は何によって左右されているのか」という実験なのですが
なんと84.7%の人が色で判断しているそうです。
(ちなみに購買は最初の90秒以内に決められ、その62~90%は色のみで判断されてるそうです)

・・・確かに思い返してみると、お洋服とか日常品とか選んだときって「何色にしようかな~」って
フレーズ言っちゃいますよね!
というか色を気にしない!なんて方なかなかいらっしゃらないと思います。


前置きが長くなりましてすみません。
大事ゆえにやはり悩んでしまう配色。そんなときに活躍するのが「配色サイト」です。
今日は私がいつも参考にしているサイト様をご紹介いたします。


0 to 255
0 to 255のサイトプレビュー


こちらのサイト様では、気になる色のグラデーションがすぐに分かります。
上のほうにある「PICK A COLOR」でコードを入力して探したり、
「RANDOM COLOR」で探したりもできます。
手っ取り早く、この下にたくさんある色の中をクリックすると・・・

0to255のサイトプレビュー2

このように選択した色のグラデーションが表示されます!
ちょっと同系色にまとめたいな・・・なんてときにとっても便利です。


そしてあともう1サイトご紹介します。


・COLOURlovers
COLOURloversのサイトプレビュー

こちらのサイトは投稿式のパターン紹介HPです。
世界中の人が投稿してるので実に何百万通りの配色があります!すごい!
そんな膨大な量から見つけるのは大変なので上のメニューの「Trends」のカテゴリーの中から
自分の求めているイメージから選んだり、いろんなwebサイトの配色から選んだり、
雑誌の配色から選んだりしています。

ちなみにこれは「Trends」の中のカテゴリー「Interior looks」です。

COLOURloversのサイトプレビュー2

そして気に入った配色をクリックすると、

COLOURloversのサイトプレビュー3

このような感じで表示され、下にスクロールすると...

COLOURloversのサイトプレビュー4

各色ごとに分けて表示されています。
一番左端にはカラーコードも記載されているのでそのまま使えてとっても便利です。
そのほかにもこちらのサイト、パターンやお洒落な写真、さらには結婚式の招待状のデザインも
投稿されていたりしているのでとても参考になります。
ぜひご覧になってみてください。


有名どころではございましたが、少しでも参考になってくれたらうれしいです。
デザインももちろん大事なのですが、配色がバッチリ決まれば
キレイにまとまって見えてしまうから不思議です。
私も配色提案できるくらいになれるようがんばります~!

簡単無料お見積もり

お問合せ内容
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • 無理なく持続する経営がしたい
  • 現状を維持しながら息の長い経営をしたい
  • リスクを回避するための線引きをしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容