目を肥やすということ

こんにちは!karen.k デザイナーのカレンです。
今日は、目を肥やすことについて徒然なるままに書いてみようと思います。

参考資料を探しなさい

デザイナーは私の天職だなあと感じることがあります。それは、いいデザインが出来た時ではなく、自分のデザイン技術にガッカリする時です。デザインをする上で、ひとつ執拗に(笑)気にしていることが「未来の自分に誇れる仕事が出来ているか」ということです。

未来の自分にとって、現在の自分の作品は未熟です。故に、未来の自分が納得する仕事を ”今” 出来る、というのは不可能なのですが、できる限り未来の自分に手を伸ばすことはできます。デザイナーの私にとってそれは、今の自分には無い可能性を他人に見せてもらうこと。

かっこつけた言い方をしましたが、つまりは、他のデザイナーやクリエイターの作品を見て、参考にして、取り入れるということです。デザイナーを始めた当初、他の作品を参考にするなんて、プライドが絶対に許さなかったのですが、あるディレクターさんに「参考資料を探しなさい」と強く指摘されてから、参考資料の偉大さを知りました。参考資料を探し始めてから、デザインスキルの成長スピードが驚くほど早くなったんです。これは本当に、ダメなクリエイターあるあるなのですが、自分の作品を作る、自分を表現する、という事に固執して他人の作品を一切参考にしない。もしくは、世界に良いものが溢れていることを知らず、自分の小さな小さな世界だけで物事を完結しようとする。これってすごく勿体無い、というか、自惚れるなよ。デザイナー1年目の私に言いたいです。もし私が美術の先生だったら、上手に絵を描く方法ではなく、何故模写する必要があるのかを教えます(笑)

冒頭で、「自分の技術にガッカリするとき、デザイナーが自分の天職だと感じる」と書きましたが、それは、デザインが私にとって成長し続けれる分野と言い得るから。すごく興味があるんです。興味があるから、他のクリエイターの作品を見る、他のクリエイターの作品を見ては、自分自身にガッカリする、そして、悔しくて立ち上がる。デザイナーを始めた当初は自分にガッカリして終わりだったのですが、”参考にする”を取り入れることで救われました。人と比べて落ち込むってよくあると思うのですが、落ち込んだら真似してみるって結構おすすめです。「あの人の真似なんてできっこない!」なんて言わずに敬意を払って真似してください。

目を肥やすということ

デザイナーとして独立した最初の頃、ある人に「目の付け所がいい」と褒めて頂いたことがあります。デザイナーという仕事をしながら、私は自分のセンスに自信がなく、参考資料を探して徹底的に真似るということをしていました。自分のアイデアじゃないということを負い目に感じていたので「目の付け所がいい」という言葉にはかなり救われました。感謝しています。ちなみに今でも自分のセンスには自信がありません。これは一生そうだと思いますし、私がデザイナーとして成長するための栄養になっているのでそれでいいと思っています。

デザイナーを志した19歳の私は、どうすればデザイナーになれるのかがわからず、調べる能力もなく、ただ毎日を悶々と過ごしていました。それでも、いつかデザイナーになりたいという一心で、世界各国の美術館に出かけたり、デザイン集を買ってみたり、とにかく”世間で評価されている作品”に触れていました。私は、いけてない自分、おしゃれじゃない自分にコンプレックスを持っていたので、作品を作るということが恥ずかしくてできなかったのですが、いいものを見るということだけは続けていました。デザイナーになった今、その経験があってよかったな〜と、思うのです。

前に参考資料を探す大切さについて書きましたが、参考資料を探すにもいいものを選ばないと意味がないのです。参考資料がダサければ、ダサい作品しか生まれませんから。なので、世間で評価されているものを見る、というのは結構大切なことなんじゃないかなと思います。市場調査のようなものですね。

デザイナーとノンデザイナーではデザインへの向き合い方が違う

現在私は、デザイナーを目指している人と、デザイナーにはならないがビジネスにデザインを取り入れたい人、2パターンの人にデザインを教えています。両者ともにデザインの考え方とスキルをお伝えしていますが、前者には「選択肢を増やす方法」後者には「選択肢を絞る方法」でお伝えするようにしています。

私の培ってきたノウハウを伝えて、私のコピーデザイナーを育成するのは簡単ですが、私自身完璧なデザイナーではありませんし、デザインのアイデアなんて、一生で全部知りきれないくらい沢山あります。なので、デザイナーを育てる場合は、世界に溢れているアイデアを自分で模索し、試し、自分のものにするスキルと考え方を重点的にお伝えしています。

逆にビジネスにデザインを取り入れたい方には、私が培ってきたデザインノウハウを凝縮してお伝えします。ビジネスにデザインを取り入れたい方が求めているのは、デザインスキルではなく、デザインを取り入れ得ることによって得られる結果です。彼らの本職はデザインではないので、選択肢を絞り、彼らの貴重な時間を節約させることに注力しています。

デザイナーはデザインの目を、魚屋は魚を見る目を、ヒーラーは心を見る目を肥やすべきで、職業によって目を肥やす分野が違います。ノンデザイナーはデザインの目を肥やすより、自分の専門分野の目を肥やした方がいい。ただ、デザインとビジネスはかなり密接しているので、少し勉強してみるといいと思います。ビジネスをしている人なら、お金のお勉強するでしょ?デザイン=仕組みなので、お金と同じくらい大切な分野です。

Workshop

教養としてのデザイン

こんにちは!karen.k デザイナーのカレンです。
現在、初心者のためのサイト制作WSを開催中のため、教材のような記事ばかり書いていましたが、たまにはカロリー低めなデザインコラムを書いてみようと思います。

デザインとは何か?

私がデザイナーを志したのは、19歳になりたての頃でした。当時の私は「デザイナー=なんとなくかっこいい人、オリジナリティに溢れた人」という認識で、デザイナーに対する考え方が今とは全く違いました。それから3年後、私はデザイナーの道に進み始めたのですが、「デザイナー=なんとなくかっこいい人、オリジナリティに溢れた人」という認識は、駆け出しデザイナーの私をかなり苦しめました。

デザイナーを始めて最初の仕事は、求人ポスターのデザインでした。私はもちろん、「かっこいいオリジナルなデザイン」を目指して取り組みましたが、先輩デザイナーに指摘される箇所は、文字の読みやすさ目の導線情報の分け方など、私が思っていたデザイナーの視点とは全く違うものでした。クライアントは、かっこよさやオリジナリティよりも、分かりやすさ目に見える効果を求めているということを知り、ショックを受けたのを覚えています。デザイナーに求められる最低限のスキルは、センスでもオリジナリティでもなく、行動学に基づいたデザイン知識なんだと諭されました。センスやオリジナリティは、効果的なデザインをした結果でなければ、何の意味も持たないと。

効果的なデザインを目指す為に、私は既存のデザインを徹底的に真似することを始めました。真似をして気付いたことは、効果的なデザインには作り手の意図があるということ。何故この配置になっているのか、何故この色合いなのか、全て説明が出来なければ、いくら見栄えが良くても良いデザインとは言えません。どの箇所を一番目立たせたいのか?目線をどのように誘導したいのか?良いデザインには、作り手の脳内が明確に現れています。もちろんいやらしくない程度に。

意図的であること

意図的であることは、デザイナーに限らず、どの職種でも大切なことです。ごく稀に、意図せずとも効果的な選択をしている天才も存在しますが、営業も、カウンセリングも、アートも、意思のない選択と行動はただの雑務です。雑務が ”悪” と言いたいわけではなく、仕事をより楽しむ為に、意図するというのはとても重要だと思うのです。

意図するとは、学びを生かすこと。無知な状態で意図することはできません。そう考えると、学びの人生への貢献度はとても高いですね!この記事を書きながら、人生を楽しむための学びを続ける人間であろうと改めて思います。

デザイナーをしていると、19歳の私がそうであったように、センスの良いかっこいい人という印象を持たれることが多いのですが、デザイナーは決してセンスの良い人ではありません。結果的にセンスが良いように見えるというのはありえますが、デザイナーはデザインの原則を作品に落とし込んでいるだけの職人です。少しの遊び心を加える時ですら、必ず原則に沿って効果的な結果を狙いに行きます。プライドを持って仕事をしているデザイナーほど、センスだけで自分の仕事を片付けられるのを嫌います。

私もデザイナーとして、デザインの原則を学んだわけですが、そこで感じたことは、デザインの原則はデザイナーだけが独占していてはいけない知識だということです。そしてこの知識は、決して運用が難しいものではなく、意識さえすれば誰でも使いこなせる、と強調しておきます。願わくば、義務教育にも取り入れてほしい。

教養としてのデザイン

最後に、全てのデザイナーが共有している4つの原則を紹介して終わります。これは、ノンデザイナーズデザインブックという、デザイナーではない人に向けられた本にも書かれている内容で、全てのビジネスマンに知っておいてほしい原則です。この記事を読んで、詳しく学びたいと思った方は、一度手に取ってみてください!

▼ノンデザイナーズ・デザインブック

近接

近接とは、関連する事項を近くに配置することです。それによって情報伝達がかなりスムーズになります。例えば、カフェのメニューを想像してみてください。写真の近くには商品名や値段が配置されています。もし写真から少しでも離れた場所に商品名が書かれていたら、写真と商品名が同じものを示していると認識するために、少し時間がかかるでしょう。最悪の場合、どの写真がどの商品なのか分からないかもしれません。

整列

整列とは、揃えることです。これも、情報伝達をスムーズにします。キッチンを想像してみてください。あちらこちらに調味料を置いていると、必要な調味料を探すのに苦労します。壁に棚を取り付け、調味料を綺麗に並べてみるとどうでしょう。一目でどこに何があるのかがわかり、必要な調味料を手に取るのが楽になります。デザインでも同じことが言えます。揃えることで、目線が楽になり、必要な情報が目に入りやすくなります。

反復

反復とは、同じ階級の部分には、同じデザインを適応するということです。階級とは、「見出し」「本文」などのことです。反復をすることで、見出しを見出しとして、本文を本文として認識するのが楽になります。これも、情報伝達をスムーズにするためには欠かせません。

反復=トンマナと言ってもいいでしょう。トンマナについてはこちらの記事で解説していますので、是非読んでみてください。

コントラスト

コントラストは、より重要な情報を目立つようにデザインすることです。SALEの広告を思い浮かべてください。どの情報よりもまず、SALE!!と言う単語が目に飛び込んできます。その次に何%OFFなのか、次にSALE期間、商品の詳細の順に目に入ってきます。これは、消費者がより興味を引く情報を目立たせることで、多くの人に見てもらう仕掛けです。

以上がデザインの4大原則です。この原則は、決してデザインだけでなく、メールを書くとき、プレゼン資料を作るとき、注意書きを作るときなど、ビジネスの様々な場面で役立ちます。今日から近接、整列、反復、コントラストを意識して町中を見渡してみてください。良いデザインには必ずこれらの原則が当てはまります!

今回はコラムとして書いたので、かなりさらっと紹介しましたが、近接・整列・反復・コントラスト、それぞれ詳しく別記事で書いていきますね!

2.トンマナ(Tone & Manner)を決める

こんにちは!karen.k デザイナーのカレンです。

早くも3記事目になる「初めてのワードプレス」今日は2. トンマナを決めるです!トンマナを語るには、沢山の予備知識が必要、かつ、考えるべきことも膨大にあるのですが、ボリューミーになりすぎないよう、初心者のサイト制作に必須のpointを厳選して書いていきます。

今日の内容はいつもに増してサイト制作初心者の方に向けて書いています。仕事としてデザイナーをしたい方/している方は、デザインを勉強するためだけにこの記事を参考にし、実際の案件ではこの方法を使用しないでください。腕が鈍り成長も止まります。「初めてのワードプレス」シリーズがひと段落したら、デザインコラムを書いていきますので、そちらをご参照ください。

トンマナ(Tone & Manner)とは?

トンマナは「Tone & Manner(トーン&マナー)」の略で、デザインの一貫性を保つための“ルール”のことです。ブランディングの為にとても重要で、ルールをあらかじめ決めておくことで、一つの印象(ブラントイメージ)を作ることができます。例えば、karen.k が目指すブランドイメージと、それを達成するためのトンマナは以下のようになります。また、ブランドイメージがそのままターゲット層になります。

ブラントイメージ
 ・シンプルモダン/おしゃれ
 ・女性らしい柔らかさ
 ・丁寧/こだわり/ゆとり

トンマナ
 ・基本の色は白とグレーで全体的に淡いトーン
 ・差し色は①ピンク②水色③オレンジ④グリーン
 ・フォントは全てゴシック体
 ・文字の行間は2.4px開ける
 ・大見出し(h1)32px/中見出し(h2)24px/小見出し(h1)20px/本文(p)16px
 ・ですます調で丁寧な日本語

リストにしてあげると、たくさんのルールがありますが、初心者のみなさんがまず一番に考えるべきことはブランドイメージとそれを表現するための色合い/色のトーンです。それ以外の項目は頭の隅に置いて、まずは色合い/色のトーンを決め、サイト全体を通して統一させることを意識しましょう。

色合い/色のトーン(Tone)を決める

では、実際に色を決めていきましょう!好きな色は青と黄色なので、青をベースに黄色をちょろっと……

ちょっと待ってください!!

色合いを決める際に初心者が最もやってはいけないことは、お手本を見ずに自分の感覚だけで決めてしまうことです。色は色鉛筆のように12種類だけではありません。微妙な違いを含めると数えきれない数の色が存在します。青と黄色の二色を取っても、どのトーンの青や黄色を使うかで印象はかなり変わってきます。色合いについてもっと詳しく書きたいのですが、日が暮れてしまうので、簡単に綺麗な色合いを決める方法をご紹介します。

簡単に綺麗な色合いを決める方法、それは、参考サイトを探すことです。そして、その参考サイトの色を真似ましょう。そんなのパクリじゃないかって?デザインは、パクってパクってパクリまくっていいとこ取りをしてより良くなっていくものです。デザインだけではなく、人間の所業は全てそうではないでしょうか?またこんなことを書いていると、進まないので話を戻しますが、参考サイトを探すのにはピンタレストがオススメです。

探し方は、まず、あなたが作りたいブランドイメージを言語化しましょう。私の場合は「シンプルモダン/おしゃれ」「女性らしさ」「丁寧/こだわり/ゆったり」です。言語化できたら「サイト おしゃれ デザイン」「サイト レディース デザイン」「サイト シンプル デザイン」といった具合に、キーワード検索をしてください。検索結果の中からあなたの好きなサイトデザインを1つピックアップして、そのサイトの色使いを参考に色を決めていきましょう。

これだけでOKです。難しいことは考えずに、最短距離で進みましょう。カラーコーディネートの勉強をする必要はありません。色は#f4f4f4という具合に6桁のアルファベットと数字で表されます。目視で似た色を選択するのではなく、1色1色コードを確認して完コピしてください。サイト内の全ての色を調べる必要はありません。まずは、多く使われている順に2~3色ピックアップしましょう。

色のコードを確認する方法は以下を参考にしてください。Google Cromeでの確認がオススメです。

カラーコードの確認方法


数字 ピンタレストに表示されているURLからそのサイトに移動する

カラーコードの確認方法

検証ツールを使ってカラーコードを調べる

検証ツールはGoogle Cromeが使いやすくてオススメです。
「option+command+I」で検証ツールを画面下に表示したら、左上の矢印ボタンをクリックし、カラーコードを調べたい箇所にカーソルを合わせてください。そうすると#〇〇〇〇〇〇で表記されているカラーコードを見ることができます。

カラーコードの確認方法

色にルール(Manner)を与える

使用する色が決まったら、色にルールを与えます。ルールも完璧を目指すと永遠にサイトが完成しなくなってしまいますので、最低限必要な4つのルールのみ決めていきます。

見出しの色(メインカラー)
・本文の色 ※時にこだわりがない場合 #333333 のグレーがオススメ
・背景の色(ベースカラー)
・差し色/アクセントカラー

ルールを決める時も、色を決める時と同じように、参考サイトを真似ましょう。

このサイトのルールは以下のようになっています。

・見出しの色(メインカラー) : グレー(#333333)
・本文の色
: グレー(#777777)
・背景の色(ベースカラー)
: 白(#ffffff)/グレー(#f9f9f9)
・差し色
: ピンク(#f98c8c)/水色(#9dd1cd)/オレンジ(#f9ad62)/グリーン(#7fd6ac)

ここまで決めて、ようやくサイト制作の下準備の半分が完了です!多少めんどくさいですが、この工程をやるとやらないとでは、サイトの完成度が全く違います。色が決まったら、フォント→レイアウトの順に決めていきます。フォントについては、4.テーマを決めるの記事で触れていますので、そちらをご参照ください。

まとめ

今日のまとめは、賛否両論あるかと思いますが参考サイトを決め、徹底的に真似る!です。相当センスに自身のある方でも、自己流でデザインをするというのはかなりリスキーです。サイト制作の際には必ずお手本にするサイトを見つけておきましょう。

次回は、ワイヤーフレームについて解説していきます!紙とペンを用意して待ていてくださいね!

4.テーマを決める

こんにちは!karen.k デザイナーのカレンです。
今日から無料版のWordpress(wordpress.com)でサイトを制作する際のコツを紹介していきます!

サイト制作初心者の方がWordpressを始めると、必ず「テンプレートにはめているはずなのに、見本のような綺麗なサイトが作れない。」という悩みを持ちます。

それがなぜかというと、
・使っている素材(写真)の色がサイト全体の色に合っていない
・テンプレート内の情報と、ご自身が伝えたい情報が違うから

ざっくりこの2点が原因です。

WordPressのテーマを見てみると、簡単に綺麗なサイトが作れるかのように見えますが、サイトデザインは、かなり巧妙に計算されているからこそ綺麗なのです。

では、どうすれば、初心者が綺麗なサイトを作れるのか?ということを5回に分けて紹介していきます。

1.サイト制作のpoint
2. トンマナを決める
3. ワイヤーフレームを作る
4. テーマを決める
5. 実際に作っていく

まず最初に言いたいのは、「テーマを決めるときに”完成形”ではなく”デザインの詳細”を見て決めよう」ということです。今日の「4.テーマを決める」のセクションを読んでいただくと、1.2.3.の工程がなぜ必要になってくるのかがわかると思うので順番を前後して話を進めます。

先にも言ったように、サイトデザインはかなり巧妙に計算されています。作っている途中で計算式が狂わないように、テーマを決める段階から、準備をしておくことがとても大切です。

そこで今日は、テーマを決める際のポイントと、無料で使える全51種類のテーマの特徴を紹介していきます!

WordPress 無料版と有料版どっちがいい?

本題に入る前にまず、断っておきたいのですが、せっかくWordpressを使うのなら、俄然「有料版」がオススメです。

ただ、「Webサイトにお金をかけていられない!」「有料版を使いこなせる自信がない!」と言う方も多いと思いますし、実際私の講座を受講してくださる個人事業主様のほとんどがそういった方達です。

どんな方でも、Wordpressを使いこなし、ビジネスを発展させてほしいと思い、無料版Wordpressに特化してpointを紹介していきます。

テーマ決めのpoint

私が受講者の皆さんにお伝えしているpoinは、全部で4つです。

数字 ナビゲーション(ヘッダー)のデザイン
数字 フォントのデザイン/カスタム可能かどうか
数字 色合い/カスタム可能かどうか
数字 フッダー(ウィジェット)のカスタム可能度

数字 ナビゲーション(ヘッダー)のデザイン

ナビゲーションとはサイトの一番上などにあり、メニューが表示される部分のことです。百貨店の”フロアガイド”のようなものと言うとわかりやすいでしょうか?このサイトのヘッダーは少し特殊で、スマホでは一番上、パソコンでは左端に表示されています。

なぜ、テーマを決める際にナビゲーションのデザインを見るのが重要かと言うと、無料版Wordpressでは、CSS(装飾などを設定するコード)を触ることができず、ナビゲーション部分は、自由にデザインが出来ないことが多いからです。

ナビゲーションは、サイトを見る人が欲しい情報にたどり着くための重要な箇所です。ご自身が「使いやすい!わかりやすい!」と感じるナビゲーションデザインのテーマを使用することをオススメします。

ここで、ナビゲーションを選ぶときに大切なポイントをひとつ紹介させてください。それは、「ページをスクロールしても常に最上部にナビゲーションが表示されているかどうか」です。

サイトを見ている人が、常にほしい情報に最短で到達できるようにするためにはナビゲーションが常に画面に表示されていることがとても大切なのです。好きなアーティストや洋服のブランドのサイトを見てみてください。ほとんどのWebサイトがそういったデザインになっていると思います。

数字 フォントのデザイン/カスタムが可能かどうか

次に、フォントのデザインを見ていきましょう。フォントデザインは、大きく分けて「ゴシック体」と があります。このサイトは、全てゴシック体です。

フォントの選び方の基準は、”好み”ではありますが、フォントが与える印象はざっくり以下のようになりますので、ご参考までに。

フォント解説

テーマによっては、無料版でもフォントをカスタマイズできるものもあります。有料版を使うのは難しいけど、フォントにこだわりたい!と言う方は、フォントのカスタマイズ可能なテーマをオススメします。

数字 色合い/カスタム可能かどうか

サイトをデザインする上で、最も大切なのが色合いですよね。色は、イメージ伝達情報としてとても重要ですので、「テーマの色合いが自分の好みか?」または「色のカスタマイズが可能かどうか?」は、しっかり確認しておきましょう。

素晴らしいことに、無料のテーマのほとんどが、色のカスタマイズが可能です。ただ、Twenty Twenty-One / Businessは色のカスタマイズが出来ないので、これらのテーマの色合いが好みではない場合は、違うテーマを選ぶことをオススメします。

数字 フッダー(ウィジェット)のカスタム可能度

最後に、フッター部分がどのくらいカスタム可能か?を確認しましょう。フッター部分は、お店の位置情報 /電話番号/ メールアドレス / サイトマップなどが表示されている箇所です。

フッダーについては、そこまで神経質になる必要はないかな?と思うのですが、こだわりたい方はどのくらいカスタムできるのか確認しておくことをオススメします。

まとめ

以上がWordpressのテーマを決める上でのポイント4点でした!もちろんこれ以外にも、細かくみる必要があるのですが、この4点は絶対に押さえておきたいポイントなので、意識してみてください。

数字 ナビゲーション(ヘッダー)のデザイン
数字 フォントのデザイン/カスタム可能かどうか
数字 色合い/カスタム可能かどうか
数字 フッダー(ウィジェット)のカスタム可能度

のポイントをまずは押さえて、細かいデザインを見ていくことをオススメします。テーマについては、もっと紹介したいことがありますが、サイトの目的や、ブランドイメージの方向性によってpointが変わってきますので、また別の記事で紹介しますね。

workshop_bnr

無料テーマの特徴まとめ

今回紹介したpointを無料のテーマ51種類では、どのようになっているのかざっくりとまとめましたので、テーマを選ぶ際の参考にしてみたください!

無料テーマの特徴
無料テーマの特徴
無料テーマの特徴
無料テーマの特徴
無料テーマの特徴
無料テーマの特徴
無料テーマの特徴
無料テーマの特徴
無料テーマの特徴
無料テーマの特徴
無料テーマの特徴