未経験からWEBデザイナーに転職して1年目。あの頃は周りについていくのがやっとの毎日でした。
仕事を振られても、「時間内に出来るだろうか」「自分に出来るだろうか」と常にプレッシャーを感じながら作業をしていたことを覚えています。
そんな新人時代を経て、今はWEBディレクターになり、大手クライアントのプロジェクトを進行する立場になりました。
作業スピードも遅く、センスも経験もなかったわたしが、スキルアップのためにやってよかった5つのことを紹介します。
スキルがなくてもすぐに実践出来ることばかりなので、とにかく成長を加速させたいと思っている新人WEBデザイナーの方にぜひ試していただきたいです。
Contents
素敵なデザインを1,000個集めてストックフォルダを作る
新人のうちは、とにかくたくさんのデザインを見て、良いデザインの感覚をインプットすることが重要です。
デザイン力を上げるために、デザイン処理の仕方や文字組、配色やレイアウトの手法に目を向けて、素敵なデザインを集めるフォルダを作成しましょう。
ナンバリングしてストックする
デザインをストックする際、保存名は001～1000までナンバリングして保存することをおすすめします。
1,000個という目標に向かって、到達までの道のりが分かりやすくなります。
わたしは「1日5つ保存する」とルールを決めて、ストックを集めるために色んなサイトを見ることを日課にしていました。デザイン力は一朝一夕では身につきません。毎日地道にコツコツ積み上げていく習慣が、大きな力に変わります。
気づきや学びのあるデザインだけを保存する
ストックする際には「参考になるな」「後で使えそうだな」「真似出来そうだな」と思うデザインを集めていきましょう。そうすることで、1つ保存するたびに気づきと学びが生まれます。一つ一つしっかり選定しながら保存していくと、デザインの良し悪しが何となく分かるようになってくるはずです。
以下は実際にわたしが新人の頃ストックしていたデザインです。
例えばこのデザインを保存した理由は、書き出すサイズより写真サイズが小さかったとき、写真と同系色でグラデーションさせることでデザインとして成り立つんだと気づきがあったからです。「キリッと爽やか、くるくるフロート。」に動きを出す事によって、シンプルなデザインが引き立ち、間延びしなくなるんだという気づきもありました。
このデザインは文字だけで構成されていますが、「ただいまテレビCM放映中のお得プラン」の上下の線にワープをかけることで、単調にならずに個性を持たせながら強調出来るんだと学びがあったからです。
これはキャンペーン対象期間を文字だけで表現するのではなく、カレンダー風に工夫することで視覚的に意識付けが出来るんだと閃きがあったからです。
このように、ただ綺麗なデザインを集めるのではなく、気づきや学びを自分の中にインプットしていくことがデザインスキルを早く上げるコツです。
デザインの引き出しとして活用する
わたしはデザイン作業に着手する前、このストックフォルダを開き、ざっと見返すようにしていました。
何度も何度も見返すので、どんなデザインを保存していたか覚えてきます。
すると「ストックにあったあのデザイン処理を参考にしよう」とか「このパターンのレイアウトに合いそうなデザインがあったはず」など、参考デザインの目星をつける時間が早くなりました。
よってデザインが仕上がるまでの時間が短縮でき、作業効率に繋がるようになりました。このストック術は今も活用していて、デザインのスピードアップとクオリティ維持に欠かせない自分だけのデザインの引き出しとして活用中です。
常にアップデートし続ける
恐らく保存数が2、300個に到達する頃には、初期に保存したデザインが色あせて見えてくると思います。
「このデザインのどこがよかったんだっけ･･」と思えてくるようになったら、それはセンスの感度が上がったサイン。
心がときめかなくなったデザインは削除して、代わりに新しくときめいたデザインを保存していきましょう。ストックは定期的に入れ替えて常にアップデートすることをおすすめします。
I/O 3000
SANKOU!
MUUUUU.ORG
WEBデザインのメインビジュアルまとめ
ランディングページ集めました。
AGT smartphone design gallery
retrobanner
Pinterest
WEBサイトのTOPページをトレースする
WEBサイトのTOPページは、ノウハウの宝庫です。
わたしが所属する制作現場でも、TOPページの制作はデザイナーだけでなく、コーダーやシステムエンジニア、ディレクターなど複数人のチェックが入ります。
見た目だけ良く作れていても、構築する上で支障のあるデザインになっていないか、UI/UXが加味されているかなど、使い勝手を意識したデザインでなければいけません。
そのサイトにおける重要コンテンツの配置や導線といった情報設計が緻密に組まれていて、トレースしていくとなぜこの要素がここに配置されていて、なぜこのデザイン処理がされているのかなど、すべてのデザインには理由があるということに気づくはずです。
サイトのゴールを見つけ出す
それぞれのサイトには、そのサイトが目標にしているゴールがあります。
採用サイトであれば、求人者に会社の魅力を説明してエントリーさせることが目的であるし、ECサイトなら商品の魅力を訴求して、商品を買ってもらうことが目的です。
ターゲットにしているユーザー層も異なるので、ただ単にデザインを模写するだけではなく、そのサイトが存在している目的は何なのか、本質を理解しながら取り組んでみてください。
レイアウト構成やデザイン処理の王道パターンを見つけ出す
WEBサイトの構成には、ある程セオリーがあって、王道パターンが存在します。
例えば、文字メインの新着情報レイアウトはこう、写真で見せたいブログレイアウトはこう、といった具合に、いくつもWEBサイトをトレースしていくと、そのレイアウトパターンに気づくようになるはずです。
新着情報の王道レイアウト
レイアウトだけでなく、デザイン処理においてもセオリーがあります。文字のサイズ、行間やタイトルと本文のジャンプ率。コンテンツとコンテンツの区切りとなる余白の取り方やボタンのサイズ等、これらのすべては読みやすさやクリックしやすさを表現するための手段です。
英語タイトル（大）+日本語タイトル（小）+テキスト+ボタン
もちろん表現方法はデザイナーの自由なのですが、新人のうちはこの基礎となるセオリーを知ることが大事だと思っています。
わたしがデザインする時も、まずは王道パターンに沿って要素の配置を決めてからアレンジするようにしています。王道パターンを知っていると、配置がすぐ決まるので、制作スピードのアップにもつながります。
パターンというのは作り手にとってもそうですが、ユーザーにとっても意識づけられているので、そこにあるべき情報が無いというのはWEBサイトを閲覧する上でストレスになってしまいます。
新人デザイナーさんのデザインチェックをしていると、配置が悪くてOKが出ないことがほとんどなので、たくさんトレースをして王道パターンを見つけていきましょう。
デバイス別にトレースする
今はレスポンシブサイトが主流なので、閲覧する画面サイズによってレイアウトが可変します。
トレースの際は、PCとスマホの両方を試してみましょう。（実際の制作現場では、ワイドモニタ、スクエアモニタ、タブレット、スマホ表示を意識して制作しています。）
横辺が長いPCと縦辺が長いスマホ表示で、どのようにデザインが可変しているかを確かめながらトレースしてみると、すごく勉強になると思います。
サイトマップ（構成図）を作成する
WEBサイトは、複数のページで構成されています。1つのサイトの中に、何ページ存在しているのか、どんなページで構成されているのかを知るため、サイトマップを作成しましょう。
サイトのページリンク（コンテンツ）を洗い出す
参考サイト：tocotoco
サイト内のリンクを洗い出すには、ナビゲーションやフッター、サイトマップページなどを開いてリンクされている部分をひたすら抽出します。
参考サイト内のリンクを洗い出すと以下の6つになります。
- https://tocotoco-trim.com/
- https://tocotoco-trim.com/about/
- https://tocotoco-trim.com/system/
- https://tocotoco-trim.com/menu/
- https://tocotoco-trim.com/#shop
- https://tocotoco-trim.com/#contact
「5」と「6」のリンクは、アンカーリンクでTOPページのコンテンツ部分に遷移させているだけなので、単独ページとしては存在していません。そのためこのサイトは以下の4ページで構成されているサイトということになります。
- TOPページ
- 私たちの思いページ
- 施術の流れページ
- メニューページ
GoogleスプレッドシートやExcelにまとめる
全ページが洗い出せたら、ページの階層を分けてみましょう。階層は、URLで判断します。
参考サイトの場合は、第１階層と第２階層で構成されていることが分かります。
ページ数と階層、URLを記載したサイトマップを作成する
このようにサイト構成を洗い出してから、改めてサイトのデザインを見ると、このサイトが持っている情報量を把握した上で、設計の意図を汲み取ることが出来ます。
サイト構成やサイト構造が分かると、情報整理がしやすくなるので、WEBサイトを制作するときは必ずサイト全体のサイト構成図を把握してからデザインするようデザイナーに指導しています。
色んなサイトのサイト構成を洗い出して、WEBサイトの構造を見る目を養いましょう。
WordPressでブログサイトを立ち上げる
WEBサイトの制作にはいくつかの工程があり、制作会社によっては複数のセクションに分かれて作業が細分化されています。
企画・設計→デザイン→コーディング→システム開発→公開と、それぞれのプロセスと役割を理解しながら組み立てていくことが大切です。
WordPressで自分のブログサイトを作ってみると、一通りWEBサイト制作と同じ工程が試せるので、新人の頃とても勉強になりました。
ドメインやサーバーの手配
WEBサイトをインターネット上にアップロードして公開するために、まずはオンライン上での環境を手配する必要があります。
ドメインを取得し、サーバーをレンタルし、この2つを関連付けて、SSL化しなければいけませんが、これが専門的で新人の頃は何が何なのかさっぱり分かりませんでした。
多くの制作会社では恐らく、ディレクターが取り仕切る分野の仕事だと思います。ですが、インターネット上にアップしないと意味をなさないWEBサイトを作っている以上、これらの仕組みを知らないより、知っていた方が重宝されるのは確かです。
分からないなりに自分で調べて自分で手配して自分でWEBサイトを公開してみると、仕事においての貢献度も高くなるはずです。
何にでも言えることですが、やってみた経験があるデザイナーと経験が無いデザイナーでは、成長過程でのひらめきや気づきに圧倒的な差が生まれ、成長スピードにも顕著に表れてしまいます。最初のうちは理解できなくてもとにかく調べてやってみることが大事だと思っています。
わたしの場合は本当に初心者だったので、エックスサーバー を使いました。ドメイン無料キャンペーンを行っていたので、費用面でも敷居が低く助かりました。
定期的にキャンペーンを行っているようなので、気になる方は要チェックです。
htmlとcssを使ってデザインカスタマイズをする
一概にWEBデザイナーといっても、所属している組織によって求められる領域は様々です。
クリエイティブ領域だけの場合も、ディレクションやコーディング作業まで対応が必要な場合もあると思います。
どの分野でも専門知識が必要なので、全領域でのスペシャリストを目指すのは難しいと思いますが、ある程度htmlとcssが触れるくらいのスキルはWEBデザイナーにとっても必要です。
テーマをインストールしたら、自分好みにhtmlやcssでデザインカスタマイズをしてみましょう。
表現したいデザインを言語で表すには、マークアップの知識が不可欠です。調べながら何度もトライ＆エラーを繰り返すうちに、基礎知識が身についてくると思います。
思った通りに反映出来たときの感覚は、デザインとはまた別の楽しさですよ。
ブログでアウトプットとインプットのサイクルを身につける
ブログサイトを立ち上げたら、学んだこと、気づいたことなどを自分の言葉で発信してみてください。
自分がきちんと理解して納得できないと言葉として表現出来ないので、分からなかった意味を調べたり、解決策を調べたりと知識の深堀が出来ると思います。
アウトプットするためには、インプットが不可欠です。
参考書を読んだり、有名なクリエイターさんのSNSをフォローしたり、インプットとアウトプットのサイクルを回す手段を持つと、各段に覚えも早くなるのでおすすめです。
＼ WordPressにおすすめのレンタルサーバー ／
学習する環境をルーティン化する
WEBデザイナーは専門職なので、日々の鍛錬無しでスキルアップは望めません。
一人前のWEBデザイナーにいち早くなるには、そのための環境を整えることが重要です。学習すること習慣化させ、毎日の生活にデザイン取り入れることがスキルアップのために一番楽な方法だと思っています。
帰宅したらまずパソコンの前に座る
WEBデザイナーとして転職する前、一般事務員として会社員をしていたので、デザインに充てられる時間は平日の業務終了後か休日のみでした。
休日はスクールに通っていたので、平日会社から帰宅した後、やることを終えてすぐにパソコンの前に座ることを日課としていました。
参考デザインを見るもよし、トレースをするもよし、とにかくパソコンを触ってWEBデザインに触れる癖を付けました。
今では年間3,500時間をWEBに充てています。それでも全く苦ではないのは、あの時の毎日が習慣化しているからだと思います。
無意識に費やしている時間をデザインに充てる
当たり前ですが1日は24時間しかありません。
仕事や通勤、食事や睡眠、生活に必要な時間を除くと、自由に過ごせる時間は多い人で1日5時間程度だと思います。
この5時間を、今何に使っているか考えてみてください。
わたしの場合は、何に使っているか明確に分からず、分からないけど確実に過ぎ去っている時間でした。恐らくテレビを見たり、スマホゲームをしたり、SNSに費やしている時間だったと思います。
もちろん、これらが息抜きのために必要な場合もありますが、無意識に費やすことを辞めました。
家でテレビを見るのを辞めて、代わりに1つデザインをする。通勤中のスマホゲームをやめて、代わりにトレンドの情報収集をする。
最初のうちは苦しいかもしれませんが、そのうち習慣になってくると毎日の学習がが心地良くなってくると思います。
こうした毎日の積み重ねが、のちに大きく成長スピードを加速させます。
デザイナー目線で見る癖をつける
WEBデザインに限らず、世の中はデザインされているもので溢れています。
駅前の看板や新聞広告、家電やインテリアなんかもみんな、どこかのクリエイターが手掛けたデザインです。
業界が違えど、きっとそのデザインが完成するまでにたくさんの試行錯誤や苦悩があって生み出された生産物だと思います。
デザインされているものを見て、「なんでこのレイアウトにしたんだろう」「なんでこの配色なんだろう」とデザイナー目線で見る癖をつけることで、自分とは違う価値観や表現の仕方に気づき、デザインの幅は無限に広がっていきます。
まとめ
わたしが新人WEBデザイナーだった頃、成果物のクオリティ、作業スピード、専門知識の理解力、どれをとっても自分は平均点以下で、デザイナーには向いていないと落ち込んでいました。
それでも、デザインすることが大好きで諦めきれず、コツコツと続けてきたからこそ出来るようになったことがたくさんあります。
デザインはセンスも大事ですが、とにかく実践して経験を積み、学んで力に変えることが重要なことだと思います。
ここにまとめた5つのことは、実際にわたしがWEBデザイナー1年目に実践していたことで、これをやれば絶対に力が付くと確信していることです。
思うようにデザインが出来るようになると、WEB制作のお仕事はやりがいと楽しさで溢れています。
新人のうちは大変なことの方が多いと思いますが、努力して挑戦してレベルが上がっていく経験は、仕事をする上で何よりの財産だと思います。新人WEBデザイナーさんのお力になれば幸いです。
とっても長くなってしまいましたが、最後までお読みいただきありがとうございました！
