この本を選んだ理由

この本を選んだのには、大きく2つの理由があります。

まず1つ目。

冒頭でも触れましたが、Webデザイナーとして働くようになって以来、

ずっと「デザイナーさんの頭の中を覗いてみたい」と思っていたからです。

そんな中で目にしたこの本の副題「デザイナーは何を考え、どう作っていくのか？」という言葉に強く惹かれました。

まさに知りたかったことが詰まっていると感じ、迷わず手に取りました。

2つ目。

WFの制作担当することが増えたからです。

これまでは、1人で案件を担当し、WFも手書きでサッと作ってそのまま自分でデザイン・コーディングまで完結させていました。

しかし、案件が増えるにつれて分業体制で進めることが多くなり、他の人に渡すためのWFを作成する機会が増えてきました。

そこでふと、「他の会社ではどんなWFが作られているのだろう？」「デザイナーが受け取りやすいWFって、どんなものだろう？」という疑問が湧いてきたのです。

今まで他の人が作ったWFを見る機会がなかったからこそ、この本を通して、実践的な学びを得られるのではと思いました。

本の概要

ワイヤーフレームからデザインカンプまで！

チェックバックを通して、デザインがどのように進化し、最終決定に至るのかそのプロセスを体系的に紹介します。

Webサイトが形になるまでにデザイナーはさまざまな試行錯誤を行います。

時に専門的な言葉で、時に感覚的な言葉を用いながら見た目はもちろん、ユーザビリティも考慮しながら完成形を目指していきます。

本書では、Webサイト制作の流れとともに納得のいくテイクに辿り着くまでのプロセスを紹介。

クライアントへのヒアリングからワイヤーフレーム設計、デザインカンプに落とし込んでからの調整までデザイナーが何を考え、どのような意図をもって完成形に仕上げているのかを紹介しています。

また、よりよいWebサイトに仕上げるために確認しておきたいチェックポイントも紹介しています。

CONTENTS

Chapter 1　事例集：コーポレートサイト

Chapter 2　事例集：ECサイト

Chapter 3　事例集：シングルページ

Chapter 4　事例集：採用サイト

Chapter 5　バナー

Chapter 6　Webデザイン制作時に気をつけたいこと

https://www.socym.co.jp/book/1488

この本のおすすめポイント

想像していた以上にWFが具体的で、そこに込められた意図の深さに驚かされました。

「ここまで作り込んでいいんだ」と、自分の中の基準が変わった気がします。

WFからイメージを広げて、初稿の時点ですでに提案力のあるデザインになっているのも印象的でした。

また、初稿から最終稿までの変化のプロセスを比較しながら見ることができ、細かな工夫がどのように印象を変えるのかが視覚的に理解できる点も魅力です。

ただ完成形を見るのではなく、“デザインの思考の流れ”までたどれるのがとても面白かったです。

こんな方に向いてます！

WFを作りたいけど、どう作ればいいのかわからない方

「どのくらい具体的に作り込むべき？」と迷っている方にぴったりです。実際のWF事例とその後のデザインの変化を見ることで、ちょうどよい“温度感”がつかめます。

デザインのブラッシュアップで手が止まりがちな方

「初稿は作ったけど、そこからどう良くしていけばいいかわからない…」という方にも◎。 本書では、初稿→最終稿までのプロセスが丁寧に紹介されており、改善のヒントがたくさん詰まっています。

この本を読んだ感想

もともとはデザインがどのように良くなっていくのかを見るつもりで本を買ったのですが、

WFを作る機会が多くなっていたためか、

デザイナーに繋げることを目的とした時に、どの程度WFを作り込めばいいかという視点で本を読ませていただきました。

この視点で本書を読み進めると、Webデザインのプロセスを知るという本書の目的からは少し逸れてしまったかもしれません。

しかし、デザイナーだけでなく、WFを作成するディレクターにも非常に有益で、きっと楽しんでいただける内容だと感じました。

Webデザイナーの頭の中を覗けた！（喜）

Webデザイナーの頭の中を覗き見することができて、最初から最後までずっと楽しかったです。

チェックバックに対してどう変化させるのかを見ていると、自分では思いつかないようなデザインがたくさんあって、引き出しを増やすことの重要性を改めて感じました。

今すぐ実践できる5つの工夫

「デザイナーが受け取りやすいWF」とは何か？

これまで自分のために手書きでWFを作っていたので、「他の人に伝えるために作る」と言うのはすごく難しいです。

『100%伝わるWF』を作ることは難しく、ある意味不可能かもしれません。

でもこの本を読んで『今すぐ実践できる工夫』がいくつもあることに気づきました。

1つ目、どんな写真を使うかを明確に伝える

写真を入れたい位置に四角を置くだけでなく、「〇〇している写真」など具体的に書き添えると、イメージが伝わりやすくなります。

2つ目、要素の大きさや色の濃淡で優先度・重要度を伝える

文字サイズや図形の大きさで優先度が自然に伝わります。

また、薄いグレーより濃いグレーを使うことで、「より重要なものだ」と視覚的に伝えられるのも印象的でした。

3つ目、本番用のテキストを入れておくことでサイトの雰囲気を伝える

あたりのテキストではなく、本番用の文章を入れるだけで、サイトの雰囲気や温度感がぐっとリアルに伝わります。

4つ目、デザインで必要な要素を伝える

「これがあったほうがいい？」「これはなくてもいいかも？」とデザイナーさんが迷ってしまうと、それだけで時間を取ってしまいます。

WFの段階で要素をしっかり整理しておくことで、デザインに集中してもらえる環境を整えることができます。

WFはグレートーンが基本ですが、必要に応じて色を使うことも効果的だと学びました。

5つ目、動線を伝える

WFを見たときに「このリンク、どこに飛ぶんだろう？」と思うことってありますよね。

それは、ユーザーも同じ疑問を抱くということ。

見落としがちなポイントですが、動線を明確に示すことは、ストレスのない体験づくりにつながります。

特に印象に残った内容

この本を読むまでは、「WFでは要素の配置が分かればいい」と考えていました。

最終的にお客様に見て判断してもらうのはデザイン案だからです。

しかし、今は「WFがサイトの完成度を左右する」とまで思っています。

加藤さんのWFを見ていると、ただ整然と並べられているのではなく、細やかな意図が込められていて、それをデザイナーさんがきちんと読み取っていることが伝わってきました。

これまで、WFはデザインの土台として位置づけていたのですが、実際には、WFがしっかりと作られていることで、デザイン案がスムーズに具現化され、全体のクオリティが高まることに気づきました。

以前、加藤さんのセミナーで「ヒアリング内容をすべて共有しているわけではない」とおっしゃっていたのを思い出しました。

“読み取れるWF”を作ることの大切さ、そして“読み取る力を持ったデザイナー”を感じました。

WFは単なる配置図ではなく、クライアントの意図や、最終的なデザインへと繋がる重要な指針であることを改めて感じました。

今後にどう活かすか

WFの段階で深く考えきれていなかったことで、デザインフェーズで「どうしよう…」と手が止まることがありました。

この本を読んで、「WFの時点でどれだけリアルに考えられるか」が完成度を大きく左右するのだと再確認しました。

設計図がいい加減だと、長く住める住宅が建たないのと同じで、

WF制作は『お客様の気持ちや意図をカタチに起こす』工程であり、

デザイン制作は『その意図を、より伝わりやすく、魅力的に磨き上げる』段階だと実感しました。

だからこそ今後は、

「このWFを見た人が、迷わずデザインに取りかかれるか??」

「この情報だけで、お客様に伝えたいことが伝わるか??」

という視点を持って、ひとつひとつの要素に理由を持たせたWFづくりを意識していきたいです。

また、誰かに渡すWFであっても、自分でデザインまで担当するWFであっても、

最初から“伝える”意識を持つことで、最終的なアウトプットの質が変わるということを忘れずにいたいと思います。

WebデザインプロセスBook デザイナーは何を考え、どう作っていくのか?／加藤千歳【1000円以上送料無料】 価格：2,200円（税込、送料無料) (2025/4/11時点) 楽天で購入

Blenderとは

Blenderは、無料で使える3Dデザインソフトです。

3Dモデルを作ったり、キャラクターを動かすアニメーションを作成したり、高品質な画像や動画を作ることができます。

また、流れる水や煙、火などのリアルなシミュレーションも可能です。

動画編集やゲームの素材作りにも使え、初心者からプロまで幅広く利用されています。

Pythonというプログラムを使って、機能を自分好みにカスタマイズすることもできます。

下の動画のように円球・立方体・平面の円などを組み合わせて対象物を作り上げます。

Blenderを始めたきっかけ

まだ詳細はお伝えできませんが、個人的に細々と制作しているデザインがありまして…

構想を立てている時に、『3DCGが使えたら面白いかも！』とアイデアが突然降りてきて、

勉強してみることに

本屋さんに行ってみるとこんな本がありました。

ミニチュア作りで楽しくはじめる 10日でBlender4入門 [ M design ] 価格：2,530円（税込、送料無料) (2024/10/22時点) 楽天で購入

大のミニチュア好きにはたまらないタイトルで、

気づいたら本を抱えてレジに並んでました（笑）

実際にミニチュアを作ってみた！

初めてBlenderを開いた時は、AdobeやFigmaと似ても似つかない操作画面で戸惑いましたが、

この本には親切すぎるほど操作手順が細かく載ってたので、

初めてでも迷うことなく操作できてすいすい制作できました。

Blenderを初めて1ヶ月未満で作った作品を紹介します

この本が終わる頃にはミニチュアのお部屋が作れるようになる予定で、

今はお部屋に置く家具やインテリアをせっせと作っている段階です。

あつ森みたいな世界観が好きな人にはドンピシャだと思います

この丸みと色合いが可愛い

最後に

いかがでしたか??

ずっとミニチュアを作ってみたいとは思っていたものの、

まさかPCで作ることになるとは考えもしませんでした

やってみると意外と難しくなくて、楽しく・ほぼ遊び感覚で取り組んでいます。

制作中にわからないことがあったらGoogleに聞いてみるのですが、

まだまだBlenderに関するブログは少ないようです。

手取り足取り教えてくれるこの本にとても助けられています

ミニチュア作りで楽しくはじめる 10日でBlender4入門 [ M design ] 価格：2,530円（税込、送料無料) (2024/10/22時点) 楽天で購入

この本が終わったら、1日１模写チャレンジでその日のお弁当とか作ってみたいな

今日はこの辺でっ！

最後まで読んでいただきありがとうございました！

また次回のブログでお会いしましょう

セミナーの概要

• 開催日：2024年10月9日（水） 21:00 – 23:00
• 形式：オンライン（YouTube Live）
• 講師：久本晴佳さん・小野幸裕さん・前田高志さん　（株式会社NASU）
• MC：鷹野 雅弘（スイッチ）
• 主催：CeeBeeDee
• 共催：CSS Nite、DTP Transit

受講しようと思ったきっかけ

お知らせメールで、このセミナーが開催されるのを知りました。

コーディングの業務を担当することが多くなり、

デザインを担当する間隔が１ヶ月以上開くことが増えてきました。

コーディングの勉強・復習に時間を使うことが多く、デザインに時間を割けない日々が続くと、

デザインの感覚を取り戻すのに時間がかかるし、『デザインの引き出しの無さ』を感じずにはいられません。

Webサイト分析やトレースをしたり、本を読んで勉強したりしてもいまいち効果がない気がしていて、

何から取り組むべきか迷っていた時にこのセミナーが開催されるのを知り、

セミナーのタイトルに惹かれてすぐ応募しました。

印象に残っていること

『デザインの必殺技を作る』という斬新な発想にとても驚きました。

デザインの必殺技とはその名の通り、デザインの手法を必殺技にしてしまおう！ということです。

以下の工程を踏むとデザインの必殺技が作れます。

• いいなと思うデザインを観察する
• 使用しているデザインの手法とそれによって得られる効果を分析する
• 必殺技名をつける

どんなにたくさんデザインを見ても、思い出せなければ意味がありません。

でもデザインを丸ごと覚えておくことは不可能です。

必殺技にしておけば、デザインの手法を思い出すことができるので、思い出しやすいですよね。

自分のデザインに落とし込むまでに時間がかからないいことが何よりのメリットだと思いました。

例えば『スポーツのような、デザインナーがデザインで戦うバトルイベントのキービジュアル』を依頼されたとします。

下のように使えそうな必殺技の手札をかき集めてきて、デザインに落とし込むことができるんです。

手札の組み合わせを変えればデザイン案を数パターン作ることも可能になります。

デザインの必殺技はレイアウト・タイポグラフィー・フィルター・カラーの4分野に分かれています。

感想

『新卒で入社した会社を1ヶ月で退職して、職業訓練校に通った話。』でも書いていますが、私は職業訓練校を卒業してこの仕事に就きました。

職業訓練校は就職するために必要な最低限の知識とスキルを身につける場所です。

デザインを勉強するというよりも、デザインソフトの使い方を学んで手を動かせる状態にするという感じです。

誰かにデザインを教えてもらう機会がなく、

Webサイトを分析したり、バナーをトレースしたり、本を読んだりして勉強を続けてきましたが、

知識やスキルが積み重ねられていない感覚が続いていて、勉強の仕方が合っているのか分からず不安でした。

今回のセミナーで『デザインの必殺技を作る』という方法を聞いて、すごく楽しく取り組めそうだなと思いました。

そして『活かす』ことにとても焦点があっている勉強方法だなと思いました。

というのも私がデザインの制作で壁にぶち当たった時はたいてい、

『このデザインを使う理由・意図はなんなのか』という理由で悩んでいるんです。

みなさんはどうでしょうか??

Webデザインの参考サイトで素敵なサイト・パーツを見てデザインを決める時は、

『インパクトを与えたい』とか『視線を誘導したい』とか、ユーザーに与えたい効果が正しく与えられるかどうかが決め手になります。

これを踏まえるとデザインの必殺技のように、

デザインの手法と効果がセットで理解できているという状態がとても望ましいと思うんです。

デザインを考える思考回路を逆算し、楽しさを加えた『デザインの必殺技を作る』という方法がとても合力的だと思いました。

最後に

いかがでしたでしょうか??

私はこのセミナーを受けていなかったら本当に後悔しただろうと思いました。

それくらい有意義で圧倒の2時間でした。

Desig-winの存在を今まで知らずに生きてきたことはとても悔しいですが、

Desig-win2の制作が決定したので、発売されたら必ず買おうと思っています。

それまでどうやって必殺技を貯めようなぁ

イラレで作って印刷して自分だけの必殺技カード作ってみようかな

なんて考えているところです。

では今回はこのあたりでっ！最後までご覧いただきありがとうございました

次回はブランディングについてのセミナーを受けたのでその感想を投稿します！

次回もぜひご覧ください！！

セミナーの概要

• 開催日：2024年9月26日（木） 21:00 – 23:00
• 形式：オンライン（YouTube Live）
• 講師：松永 克輝（株式会社GRIZZLLY.DESIGN）
• MC：鷹野 雅弘（スイッチ）
• 主催：CeeBeeDee
• 共催：CSS Nite、DTP Transit

受講しようと思ったきっかけ

以前『朝までディレクションとか』を受講した時にセミナー情報のメルマガを登録したんですが、

セミナー当日の夜、偶然告知メールを目にしました。

普段帰宅してからGmailを見ることはほぼ無いのですが、その日は偶然Gmailを開いたんです

講師をされていた松永さんは、私がWebデザインを勉強し始めた時、最初にフォローしたデザイナーさんでした。

フォローさせていただいた時から、『どうやったらこんな素敵なロゴが作れるんだろう』と不思議で、

一度お話を聞いてみたいとずっと思っていました。

『こんな偶然はなかなかないよなぁ、これは参加するしか無い！』と思い、参加の申し込みをしたのはセミナー開始の2時間前でした。

印象に残っていること

セミナーの序盤で、『ロゴは旗印である』というお話がありました。

お客様に対してブランドの世界観を伝える旗印であり、差別化を図る旗印でもあるとともに、

そのお店・企業が最終的にどこを目指していくのかを社員・スタッフに示すための旗印でもあるとおっしゃっていました。

ロゴはお客様に見てもらうものだという認識はありましたが、

会社のため・社員のためになるとは思っていませんでした。

『このデザインを見て顧客に何を感じてもらいたいか』を第一に優先することが多かったし、

『サービスや商品への思いをどう顧客に伝えるか』が大事だと思っていました。

制作を依頼してくださったお客様は発信者であり、その顧客が受け取り手だと思っていましたが、

私たちが作るものをお客様がどう受け取るかという部分をもっと重視すべきだと気づくことができました。

感想

今回のセミナーではロゴの発想法について焦点を当て、

以下の8つの発想法について詳しくお話を聞かせていただきました。

1. 文字の形からひらめきを得る
2. 物事の捉え方を変更する
3. リメイクで付加価値をつける
4. 具体物を図形化して表現する
5. モチーフの一部を置き換える
6. パーツを反復させて造形する
7. 動物や自然をモチーフにする
8. 異なる要素を組み合わせる

とにかく次から次へとためになる知識が出てきて、メモをする手が止まる時間がありませんでした。

ロゴ制作時のお話でしたが、アイデアの出し方はロゴ制作だけに限るものではなく、

Webデザインでも使える発想法だと思いました。

実際、セミナーの翌日に社内会議があり、サイトリニューアルの案件について話し合っていたのですが、

お客様がリブランディングを希望されていることもあり、

デザインのコンセプトを考えている過程で、発想法を活かすタイミングがありました。

いつもだったら『うーん…』と考え込むことが多いですが、

すらすらとアイデアが出てきたのはこのセミナーを受講したおかげだと確信しています！

また、発想法に焦点が当てられてはいたものの、ロゴデザイン全体の流れについてもお話をしていただけたので、

どんな風にお客様とやり取りをされているのか、作成時のこだわりや裏話についても聞かせていただくことができて、

有意義な時間を過ごすことができました。

最後に

セミナーが終わってから何かX（Twitter）に投稿したい！とは思ったものの、

お話しされた内容が圧巻すぎてうまく言葉がまとまりませんでした。。。

#ロゴのアイデアの生み出し方 ほんとに圧巻すぎました
感想を言い始めると文字数が足りないので、
ブログでまとめたいと思います
貴重なお話ありがとうございました！ pic.twitter.com/FKOhF3Lq7w

— 髙井彩加 | Webコーダー・フロントエンドエンジニア (@webis_takai) September 26, 2024

松永さんからは素敵なお返事をいただけて本当に嬉しかったです

デザインのセミナーに参加することが多いので、

次はコーディングや実装のセミナーに参加してみたいと思います

今日はここまでっ！

最後までご覧いただきありがとうございました

また次の投稿でお会いしましょう

デザインアイデアを考えるのって難しい。。。

私自身も職業訓練に通ったり、就職活動をしていた時に、

『制作実績を作らなければ！！！』とがむしゃらに手を動かしていました。

実務経験がない中で【どんなお客様が、どういうターゲットを想定してなぜデザインを頼んでくるのか】

について想定するのはとても難しくて、

デザインに入る前に時間がかかりすぎて挫折することが多々ありました。

『実務経験を積めば、自分で架空のお客様を想定できるようになる』と思っていましたが、

現状お客様にお会いする機会がゼロに等しいので、

どういう課題を抱えている人が多いのか、まだまだ把握しきれていないなと感じています。

でもデザイナーとしてたくさんデザイン経験を積みたい！！

もっともっと誰かのためになるデザインを作りたい！！

こんな思いを解決してくれたのがchatGPTです。

chatGPTとは

TikTokなどでも度々紹介されるchatGPTですが、

『chatGPTなんて初めて聞いたよ！』という方のために、簡単にご紹介させていただきます！

chatGPTに『chatGPTについて友人に簡潔に説明したいです。』と伝えてみたところ、

以下のような回答が返ってきました。

ChatGPTについて友人に簡潔に説明するために、以下のように伝えると良いでしょう：

ChatGPTは、OpenAIが開発した高度なAIチャットボットです。自然な言語で対話でき、質問に答えたり、アドバイスを提供したり、さまざまなトピックについて情報を提供したりします。例えば、プログラミングのヘルプや旅行の計画、雑談など、いろいろな用途に使えます。

https://chatgpt.com/

とのことです（笑）

会話を通して自分の疑問を解決してくれる便利なAIで、

仕事でもわからないことがあるとかなりお世話になっています。

無料版を使っているのでデータが少し古いのがネックですが

さて、次章で実際にchatGPTからアイデアをもらってみましょう！！

chatGPTにデザインアイデアをもらう方法

chatGPTからデザインアイデアをもらう方法は簡単！

『架空のお客様を想定してバナー（Webサイト）を作りたいので、お客様として依頼してくれませんか？』

と聞いてみてください。

実際にchatGPTが考えてくれた要件がこちらです

バナー制作依頼

依頼者名：山田太郎（Taro Yamada）

会社名：株式会社エコライフ (EcoLife Co., Ltd.)

業種：環境保護製品の販売およびコンサルティング

連絡先：

• メール：taro.yamada@ecolife.co.jp
• 電話：03-1234-5678

バナーの目的： エコライフの新製品「EcoBottle」発売キャンペーンのためのプロモーションバナー

バナーの掲載先：

• 会社公式ウェブサイトのトップページ
• ソーシャルメディア広告（Facebook, Instagram）

ターゲット層：

• 20代から40代の環境意識の高い男女
• エコロジー製品に関心のある人々
• サステナビリティに関心のある企業

バナーのサイズ：

• ウェブサイト用：1200 x 600ピクセル
• ソーシャルメディア用：1080 x 1080ピクセル

バナーのデザインイメージ：

• クリーンでシンプルなデザイン
• エコロジーを象徴する緑や青を基調としたカラー
• ナチュラルな雰囲気
• 製品の写真を中心に、キャッチフレーズやアピールポイントを明確に表示

キャッチフレーズ： 「未来を変える、エコな一歩。EcoBottle、新発売！」

アピールポイント：

• 環境に優しい素材使用
• 再利用可能なデザイン
• スタイリッシュなデザインで持ち運びに便利

テキスト要素：

• 製品名「EcoBottle」
• キャッチフレーズ
• 「詳しくはこちら」などの行動喚起ボタン

希望納期： 2週間以内

その他の要望：

• バナーのデザイン案を3種類提案してください
• 製品の詳細情報や写真は添付ファイルを参照してください

chatGPT

連絡先まで考えてくれるの!?

こんな詳細までchatGPTが考えてくれたら、かなりデザインを考えやすいですよねっ

実際にデザインしてみる！

では、このアイデアをもとにデザインを作ってみたいと思います

よかったら皆さんも作ってみてくださいね！

今回作成したバナーはこちらです

工夫したこと

• 20代〜40代をターゲットにしているので、幅広い世代に親しみを持ってもらえるように丸ゴシックを使用
• キャッチフレーズ中の『エコ』を目立たせるため、文字タッチツールでリズム感を演出
• アピールポイントは短く簡潔に文言を再構成
• ひらがなと漢字のフォントサイズに差をつけた
• 背景に木の写真を使うことで、『エコロジー製品』だと視覚的に伝わるようにする

バナーの制作にかかった時間は8.28時間。。。（1日以上かかってるよ）

エコロジー製品のバナーって少ないんでしょうか??

参考を見つけるのに時間をかけすぎたのが反省点です

それぞれの要素を目立たせる方法について、引き出しを増やしていきたいと思いました。

最後に

いかがでしたでしょうか??

ほんとに便利な時代になりましたね

私にとってはデザインと効率の良さは最も両極端にあると思っているので、

デザインに入るまでの過程を効率化してたくさんデザイン経験を積んでいきたいと思います

実際にバナーを作った方がいらっしゃいましたら、

X（旧Twitter）のDMや、#お客様はchatGPTでポストしていただけると嬉しいです（恋人はサンタクロースみたいなハッシュタグやな）

最後までご覧いただきありがとうございました！

みなさんこんにちは

GWはいかがお過ごしでしたでしょうか??

中には10連休だったという方もいらっしゃるのでは…

私は前半の３連休でフットサルの試合に出たり、ユニバに行って、

後半の４連休は、高校時代の友達に久しぶりに会ったり、旅行に行ったりして、

充実したお休みを過ごすことができました

頭の中はまだ余韻に浸っていますが、仕事モードに切り替えて頑張りたいとおもいます

今回は…

さて、今回は『グラデーションをどう使う??』というテーマでお話ししたいと思います。

先日クライアントワークでデザインをしている時に、

グラデーションを使ったデザインについて悩むことが多々ありました。

グラデーションはスタイリッシュでおしゃれに見える一方で、

割合が高すぎると騒がしい印象になり、悪目立ちしてしまいます。

SANKOU!に掲載されているWebサイトを見て、

グラデーションの使い方を分析してみたいと思います。

ぜひ最後までご覧ください！

スタイリッシュに使う

グラデーションが使われているスタイリッシュなWebサイトには、

4つの特徴がありました。

• ベタ塗りにしない
• さりげなくグラデーションを使う

べたっとグラデーションの背景を引くのではなく、

円形にグラデーションをかけ、ぼかしを入れることでスタイリッシュな印象になります。

配色についても明度の低い色を使っているので、使用している色の数が多くても悪目立ちしません。

力強く使う

• グラデーションを濃く使う
• サイト全体に占めるグラデーションの割合が高い

さりげなくグラデーションを使うとスタイリッシュに見える一方で、

ベタ塗りにすると力強さを演出することができます。

株式会社ブースターのように、原色に近い色を使う方がより力強く感じられます。

サイト全体で見てもグラデーションを使用している割合が高いのが特徴的です。

多すぎると騒がしくまとまりのない印象を与えてしまうので、

全体のバランスをみて調整する必要がありそうです。

可愛く使う

グラデーションを使って可愛さ・女性らしさを演出しているサイトには、

2つの特徴がありました。

• 色数が多い
• 女性らしさを感じるパステルカラーを使用している

可愛さを演出したい時は、

パステルカラーや淡い色など、女性らしさを感じる優しい色が使われます。

また、一つのグラデーションに使用する色数が多いのも特徴的だと感じました。

女性用のシャンプーのWebサイトでは、グラデーションを使って

ホログラムのような、光が当たった時の反射を再現しているものが多いです。

なんでかな〜と思って考えてみたのですが、

反射して光っているのをみていると

『自分の髪の毛も光にあたって艶やかに見えるようになるかも』と感じさせるためかなと思いました。

タイトルで使う

タイトルでグラデーションを使う場合は2パターンのデザインが考えられます。

Tverの採用サイトのように部分的に使うと、文字にスポットライトが当たっているように見えて、

斬新さ・先進的な印象を受けます。

一方で、Career Paletteや株式会社カミナシのように、文字全体にグラデーションがかかっていると、

グラデーションを使わない場合に比べてデザイン性が高く感じられます。

配色や色数によって、ユーザーに与える印象もさまざまです。

企業のコーポレートサイトでは、

信頼感や誠実さを演出するために青・水色の組み合わせが多い印象です。

ボタンで使う

ボタンをグラデーションにしたい時は以下の2パターンが考えられます。

• 背景ベタ塗り
• 線と文字にグラデーションをかける

実際に株式会社KKIの採用サイトでは両方のデザインが使われています。

このように背景ベタ塗りと線・文字がグラデのボタンを見比べてみると、

圧倒的に背景ベタ塗りのボタンの方が目立つのがわかります。

サイトの構成上、ユーザーにおさせたいボタンに優先順位がある場合に、

使い分けができそうです。

ホバーアニメーションはどうなる??

4パターンのホバーアニメーションを紹介します！

ボタンにグラデーションを使用する場合は、色を変えるよりも文字やアイコン、図形を動かすアニメーションが多くみられました。

文字や図形が動く

株式会社インフォディオで使われているボタンは、

文字が下からスライドインするアニメーションに加えて、

横の円形が拡大し矢印が出現します。

矢印が動く

株式会社スタイルポートでは、矢印が右に消えて、左側から新しい矢印が出てくるアニメーションが実装されています。

シャドウが変わる

おんせんしでは、ボタンの上にカーソルを合わせると

ボタンの右側と上にさりげなくかかっていたbox-shadowが、左側と下に濃く入ります。

合わせて矢印も外側に動きます。

Renxa株式会社の採用サイトでは元々指定されているbox-shadowが、

ホバー時に消えるというアニメーションが設定されていました。

グラデーションが入れ替わる

リンドール・フレーバーコレクションではホバー時に左右の色が入れ替わるアニメーションが実装されています。

こんなアニメーションもあるよっ！

ここからは番外編！

グラデーションをうまく使っていて、素敵なアイデアだなと思ったアニメーションを集めてみました。

Dr.TRAININGでは文字と背景が点滅し、電気が点灯したようなアニメーションが実装されています。

株式会社東京テクノロジーでは、カーソルにぼかしのかかった円形を設定しており、

ボタンの上にカーソルを乗せるとグラデーションに見えます。

GO株式会社の脱炭素サービスGXでは事業内容にちなんで、

ホバーするとコンセントのアイコンが動き、充電が進むアニメーションが実装されています。

背景で使う

ベタ塗り

HEグループの採用サイトでは背景にベタ塗りのグラデーションが使用されています。

後ほど紹介する円形＋ぼかしや、図形で切り取っている背景と比較すると

インパクトのあるデザインになっています。

円形＋ぼかし

株式会社メルンではグラデーションのかかった円形にぼかしをかけて使用しています。

先ほど紹介したベタ塗りと比較すると、

目立ちすぎずスタイリッシュさを演出してくれます。

Harmonies with KUMONでも円形＋ぼかしの背景が使用されています。

ぼかしをかけると、自然と同じ色でグラデーションを作ることができます。

先ほどよりもサイズの小さな円なのでより可愛く感じます。

図形で切り取る

株式会社KKIの採用サイトでは、ウェーブのかかった図形にグラデーションがかかっています。

円・四角形・三角形などの見慣れた図形ではなく、

独自の図形を使用することで唯一無二感があって素敵です。

またこのサイトではグラデーションにノイズがかかっているので立体感があります。

あしらいで使う

株式会社桜商会ではサイト内で使われている円形全てにグラデーションがかかっています。

彩度の低いグラデーションなので、文字やアイコンに使われている黒や青とも喧嘩をせず、

目立ちすぎることもありませんが、

『無いよりもある方が目立って見える』というあしらいとしての役割を完璧に果たしています。

大気社の採用サイトでは右上の円や、アイコンにグラデーションが使用されています。

細い線のアイコンに使用しているので、

『よくみてみたらグラデーションだった！』というぐらいのさりげなさで、

あしらいとして素敵だと思いました。

アイコンがグラデーションになっているとひと工夫加えたように見えます。

最後に

いかがでしたでしょうか??

Webデザイナーとしてはまだまだ未熟なので、デザイン面で悩むことがたくさんありますが、

言い換えれば学ぶチャンスがたくさんあるということだと思って、

これからもこのコンテンツを続けていきたいと思います。

最後までご覧いただきありがとうございました！

また次回のブログでお会いしましょ~！

COLORSとは

COLORSはプレゼンデザインが提供するグラフ（チャート）の配色ジェネレーターです。

円グラフ、棒グラフ、折れ線グラフ、帯グラフなど、ほとんどのグラフに使うことができます。

現在55パターンの配色が公開されています。

これだけあれば、デザインの雰囲気に合う配色がきっとみつかるはず

もしかしたら退職するまでこのサイトで乗り切れるかもしれません

グラフだけでなく、インフォグラフィックを制作する際にも活用できそうです。

プレゼンデザインのサイトでも紹介されていますので、ぜひ読んでみてください。

https://ppt.design4u.jp/

COLORSの使い方

COLORSの使い方を順を追って説明します!

気になる配色を選ぶ

最初に気になるグラフを選びましょう。

複数のグラフと合わせて使いたい場合は、グラフのアイコンを押してみてください。

実際に並べた時のイメージがしやすくて、とてもありがたいです

配色のカラーコードを確認する

配色を決めたら、カラーコードを確認します。

右下の鉛筆のアイコンをクリックすると、配色の詳細ページに移動できます。

『このまま使うよ』という方は、詳細ページ下部の『カラーコード』から全てのカラーコードとRGBが確認できます。

「COPY」を押すと数値をまとめてコピーできます。

メモして残しておけば、サイトを消してしまっても安心ですね

配色をより自分好みに変更したい方は次のセクションで説明しますので、

参考にしながら変えてみてください。

配色の変える方法

カラーの編集は『カラーピッカー』、『カラーと設定』の各項目と『グラフカラー』のセクションで編集できます。

カラーピッカー

画面左上の『カラーピッカー』からは画像の色を取ってグラフに反映させることができます。

カラーコードを入力する手間が省けたり、

画像と色の雰囲気を合わせたい時に大活躍してくれそうです!

カラーコード

カラースウォッチをクリックすると、カラーピッカーから配色を編集できます。

また、カラーコードをクリックすると、文字の編集・入力が可能となります。

RGB

カラーコードはわからないけど、RGBの数値を微調整したい時に使えます。

カラーコード同様に数字の編集・入力が可能です。

生成する色の数

数字をクリックすると、プルダウンが出てきます。

最大16色まで作れるので、項目の多いグラフを作るときも安心です（そんなことある??）

というよりは、1色でグラフを作りたい時に便利です

数字を選択すると、グラフカラーとサンプルに即反映されるので、

実際のデザインを見ながら調整できるのもとても便利です。

明るさのパターン

ボックスのアイコンを選択すると、色の並べ方をについて選択肢が表示されます。

選択肢は『暗い色から明るい色へ』と『明るい色から暗い色へ』です。

それぞれの色で並べ方を決めることができます！

明るさの微調整・鮮やかさを加える

カーソルでドラッグして色の微調整ができます！

調整するとバーの背景が黄色になり、

ちょうど真ん中の時はグレーになります。

自分で調整したら、変になるかもと恐る恐るやってみましたが、

どれも素敵な配色になったので、気負わず編集できます

色の数を増やしたいとき

色の数を増やしたいときは、『カラーと設定』の右側にあるプラスのアイコンから追加できます。

色を入れ替えたいとき

データの中でも特に目立たせたい項目があるとき、

配色が入れ替えられたらいいのにな…と思うことがあると思います。

実はこのサイト、入れ替えできるんです!!（私も使い終わってから知りました）

カラースウォッチの近くにカーソルを持って行って、

ミッキーマウスのようなカーソルになったタイミングでドラッグしてみると、

色の入れ替えができます。

下のグラフカラーやサンプルに反映されるので、確認しながら入れ替えてみてください。

色のトーンを変えたいときは

公開されている配色ははっきりした色合いが多い印象です。

落ち着いた雰囲気のサイトには合わないなぁ…と諦めそうになっている方、

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

もう少し彩度の落ち着いた色を使いたいときは、

グラフカラーの色をドラッグして動かしてみてください。

先ほどと比較すると、とても落ち着いたカラーの配色になりました。

最後に

初めてブログでツールサイトを紹介してみましたが、いかがでしたでしょうか⁇

今後も業務で使えるツールサイトを見つけたら、

どんどん紹介していきたいと思います!

最後までご覧いただきありがとうございました

素敵な1日をお過ごしください

今回ブラッシュアップするのはこちらの『海鮮丼フェアのバナー』です。

「与えられた素材をそのまま並べました!!」と言わんばかりのバナーを、どう変化させられるのか挑戦します！！

制作前に、職業訓練校で作った海鮮丼のバナーの反省点を4点挙げてみました。

• 写真の切り取り方が不自然
• 背景がのっぺりしている
• 文字が同じフォントばかりで単調
• 文字のサイズ差が小さく、強弱がない

以上の反省点を踏まえ、今回の制作では以下の2点を工夫しようと思いました！

• 海鮮丼が美味しく見えるように、シズル感を出す
• 市場やお寿司屋さんで見かける力強いフォントを使うなど、フォントにこだわる

バナーの制作条件

今回は以下の条件でバナーを制作しました。

クライアント：北海産業共同事業体

フェアの名称：北海道海鮮丼フェア

推しポイント：朝の漁でとれた海鮮を会場まで直送しているので新鮮・品質で勝負

指定のテキスト：「海鮮丼フェア」、開催期間（8/11~16）

その他：海鮮丼の写真を使用すること、サイズは250×300

以上の条件は、職業訓練校でバナーを作った時と同じ内容です。

完成したバナーはこちら！

こちらが今回制作した海鮮丼のバナーです!

いかがでしょうか??

制作にかかった時間は約6時間30分でした。

前回よりもいいものを作りたい！という気持ちで、悩みながら作りました。

工夫したところ

今回の制作で工夫したところは以下の6点です。

• 『海鮮丼フェア 開催決定!!』を一番目立たせるため、筆書のフォントを使用
• 背景を抑えて、『海鮮丼フェア』と海鮮丼の色味目立たせる
• ゴシック体を使用して、開催期間を情報として確実に伝える
• 食欲を増進させる加工を意識し、海鮮丼の画像は色調補正で暖色よりに
• 海鮮丼を大きく配置して、質感を伝えることでシズル感を演出
• 『北海道』の文字を見なくても伝わるように、北海道の地図のイラストを背景に配置

『海鮮丼フェア』のバナーなので、最初はたくさん海鮮丼の写真を使いたいと考えていました。

ところが、実際に3つほど並べてみると、その分1つの写真サイズが小さくなってしまい、シズル感が伝わりにくくなってしまいました

今回はサイズの指定がありましたが、横長のバナーであれば、いくつか並べてみても素敵な作品になりそうです！

ブラッシュアップをしてみて…

今回は、初めて自分の作品のブラッシュアップに挑戦してみました！

制作前にBANNER LIBRARYを見ていたのですが、

「躍動感があると美味しそうに見えるんだなぁ」とか

「材料を見せているバナー多いなぁ」など勉強になることがたくさんありました。

そして制作中には、自分が要素の配置や空白を残すことについて、苦手意識があると気づくことができました。

課題が克服できるように、これからも世の中に出ている作品を見たり、バナーデザインの場数を増やしていきたいと思います。

黒歴史のような作品が多数残っているので、定期的にブラッシュアップにも挑戦するつもりです。

いつか今回の作品もブラッシュアップする時が来るかもしれませんね。

最後までご覧いただきありがとうございました

素敵な1日をお過ごしください