今回はバナートレースをいくつかやって「次に何をすればいいんだろう？」と思っている方
向けに私が実際にやったことをまとめます。

momo

バナートレースでスキルを磨いたけど、実際お仕事をするためにはどうしたらいいんだろう？と悩むよね〜

mito

私も悩んだので、試行錯誤を繰り返しながら試したことを書いています。

デザインを勉強していてお仕事に繋げるために何をしたらいいのだろう？と悩んでいる方の参考になれば嬉しいです。

バナートレースで身につけられたこと

まずはバナートレースで身につけられることは何か？について。

mito

一言でいうと、「ツールの使い方」と「デザインを見る目が養われる」ということだと思います。

momo

この2つを手に入れると、目で見たデザインを自分で再現できるようになるよ！

【すぐできる！バナートレースの始め方】デザイン初心者がPhotoshopとIllstratorでやってみたデザイン初心者がバナートレースを2ヶ月やった体験談。やり方とバナートレースで得られたものを詳しく解説します...

バナートレースでは身につけられなかったこと

トレースは誰かが作ったものをあくまで模写するということ。

コンセプト、ターゲットなどを考える部分が抜けています。

mito

実際のお仕事だとフワッとしたターゲットやコンセプトは決まっていてもそれを自分のなかで咀嚼してさらに考える必要があります。

momo

考えた結果、コンセプトを変えた方がいいのでは？などという提案をすることもあるね。

mito

この過程を飛ばし、自分の中で咀嚼してさらに考える作業をしないと、言葉で説明できない「なんとなく○○」なデザインになってしまいます。

momo

つまり、思考をデザインに落とし込むという練習が必要だね！

バナートレースの次はお仕事としてバナーを作成する

えっ！いきなりお仕事？と思った方多いと思います。

一言でお仕事といっても、依頼されるまでにはコンペで採用される、試験に合格するなどすぐにお仕事につながらないことも多いです。

mito

なので、「コンペに応募する、試験を受けるなどお仕事として依頼される準備をする」という意味も含め、お仕事としてバナーを作成するという表現にしました。

実際にやったことは、これからあげる4つです。

①ランサーズに登録してバナーコンペに応募する

（依頼主の方によりますが、）基本的に「コンセプト」「ターゲット」「イメージ」などが明確に書かれているため、取り組みやすいです。

momo

他の人の提案も見られるのでそれを見るのも勉強になるよ！

私は、バナートレースをやりながら7つくらいチャレンジしました。

学びの場と割り切り、コンペに落ちても落ち込まない

まず、これにつきます。「初心者レベルだから採用されなくて当たり前、勉強のためにやっているんだ！」と思って取り組まなければ、モチベーションが保てません。

コンペに採用された人のデザインをよく観察して良い要素を学ぶ

mito

採用された人のデザインはパッと見た瞬間いいなと思うデザインということが多かったです。

「私もこれを選ぶな〜」と思いました。

momo

依頼をどう解釈してデザインに落とし込んでいるのか観察して学ぶと良いです。

デザインを提出する前に必ず誰かにフィードバックを挟み、何度か修正を重ねてから出す

最初の頃、デザインのコミュニティー(@Canvas_up)のレビュー部屋でレビューしていただいていました。

悩んでいる部分があったり、特に細かくレビューしていただきたい時はオンラインサービスのレビューを活用していました。

mito

アロードさん(@arowd_info)の、ワンコインレビューはテレビ電話を使い、お話ししながらその人のレベルに合わせたレビューやアドバイスをしていただけるのでデザイン初学者の方おすすめです！

mito

Twitterで#ワンコインレビューで検索するとレビューを受けた方のデザインBefore→Afterを見ることができます！

momo

ワンコインレビューの本もあるよ！実際にレビューを受けた人の感想や作品も見られるのでどんなレビューをしてもらえるか気になる方必見です！

詳細はアロードさんのブログをチェックしてみてください！

脇道逸れましたが、本題に戻ります！

mito

いくら学びの場と割り切っていても仕事としてという意識なので、完成度は高められるところまで高めたい、毎回自分ができる最良のデザインを提出するということは意識していました。

momo

最初の頃をふりかえると、デザインの技術よりも、依頼に対する思考が足りていないということが多かったね〜。

mito

この部分、バナートレースだけではなかなか補えない部分です。

駆け出しWebデザイナー、ランサーズでバナー制作に挑戦するこんにちは、mito（@mito_works）です！ 今回は、ランサーズでバナー制作のコンペに挑戦したことについてまとめました。 結...

②クリエイターズマッチの試験を受ける

こちら2回受けましたが落選です。

即戦力レベルが求められているということだと解釈しました。いずれまた挑戦したいです。

mito

試験を受けた後、1つのバナーを作るまでの制作フローが細かく書かれた資料をいただけるのでそれを見て勉強し、その後のバナー制作にすごく役に立ちました。

momo

試験を受けて終わりではなく、次に活かせるのはいいね！

③知り合いからお仕事を受注する

お仕事募集をしている中で自ら「やりたいです！」と手をあげて受注しました。

(アイキャッチ制作)チャイカプ～タイ就職・タイで働く～

mito

最初は自ら手をあげるというのはドキドキしますが、良い経験になります！

④ココナラに登録してお仕事を受注する

直接やりとりの場合、トラブルが発生した時どうしたら良いか分からなくて不安という方は、ココナラなどクラウドサービスに登録してお仕事をすると安心だと思います。

https://twitter.com/mito_works/status/1180082008745074688

実績を増やすために自分でテーマを設定して作る

名刺やブログのアイキャッチ画像制作なども制作し、実績としていました。

初めてでも失敗しない名刺制作~初心者編~こんにちは、mito（@mito_works）です！ 今回は、はじめてWebデザイナーとして作った名刺について、デザインをするとき...

mito

実はブログのアイキャッチ画像も色々なデザインパターンを実験する場として活用しています。

momo

instagramにまとめていると、たまに「アイキャッチお願いしたいです〜！」とお声掛けいただけたりするよ〜！

mito

バナートレースをやりつつ、お仕事につなげるための道をいくつか作っていく意識を持つと良いと思います！

まとめ

mito

この2つの取り組みを通して“とにかく作る”ということを徹底しました。

最終的にはポートフォリオに載せると自分の実績として人に見せられるので良いと思います。

【初心者&時間のない人必見！】ポートフォリオを2日で作る手順~#30DAYSトライアルDAY18~DAY20こんにちは。mito（@mito_works）です。 コーディングのスキルアップのために挑戦している#30DAYSトライアルの記録...

momo

初めてお仕事する際は必ずと言って良いほど「ポートフォリオ見せて！」と言われるもんね。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

8月から始めた #30DAYSトライアル。ついに全てのステージ完走です！

momo

わ〜い！！

せっかくなので、ここまでの学びをまとめたいと思います。

こんな学びがありました！〜PHP&SQL編〜

HTMLやCSSの書き方とは違うPHP独自の書き方とオブジェクト指向を学びました。

#30DAYSトライアル
3rd DAY1：Progate PHP Ⅰ

wordpressでも連想配列、foreach文はよく見かける気がするので、きちんと抑えておきたい！

— mito@ひよっこwebデザイナー (@mito_works) November 1, 2019

https://twitter.com/mito_works/status/1190605992414760960

https://twitter.com/mito_works/status/1190980247539159040

https://twitter.com/mito_works/status/1191589994491596801

DAY5：Progate SQL Ⅰ　#30DAYSトライアル #3rd
書いてサッと答えが返ってくる感じ、SQLやっぱり好きだなぁ〜。と改めて。
むか〜しとったOracleのBronze SQLの知識も無駄にはなっていないと思ってちょっと嬉しくなった！

— mito@ひよっこwebデザイナー (@mito_works) November 5, 2019

連想配列

オブジェクト指向

こんな学びがありました！〜環境構築編〜

ローカル環境で複数のWordPressを管理できる方法を学びました。

mito

これで複数案件、同時並行でも大丈夫です！

簡単！ローカル環境のMAMPで複数のWordPressサイトを管理するこんにちは。mito（@mito_works）です。 WordPressでWeb制作を行う際にまずローカル環境で制作しますよね？ ...

こんな学びがありました！〜WordPress編〜

分からないところは参考書を逆引きで使って学習を進めました。

mito

このブログ書いていることもあり、“あの実装は裏でこういう処理を書いているのか！”と理解が早かったです。

#30DAYSトライアル #3rd
DAY10：Wordpress(3)
HTML 、CSS、PHPを理解した上で進めているので、wordpress独特の書き方のみ「初めて見る！」という状態。

過去の積み重ねのおかげでスムーズに進む気がする！

— mito@ひよっこwebデザイナー (@mito_works) November 11, 2019

#30DAYSトライアル #3rd
DAY13：Wordpress(6)page.phpを編集

esc_urlを調べると"URLに最適化される"と一言。

？？？？

と思ったけれど、実際出力してみると一目瞭然！！(カテゴリー表示部分)

var_dump()も大活躍です pic.twitter.com/mP1e9DIKKU

— mito@ひよっこwebデザイナー (@mito_works) November 14, 2019

#30DAYSトライアル #3rd
DAY14：Wordpress(7)

メインクエリという処理の本筋みたいな存在をようやく理解！

「WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第2版]」
逆引きで使えて、すごく分かりやすい！初心者もすんなり理解できるのでおすすめですhttps://t.co/cdcvrixh1B pic.twitter.com/QQgqAeWdKW

— mito@ひよっこwebデザイナー (@mito_works) November 15, 2019

WordPressの要点

トップページにピックアップ記事を表示

サイドバーの作り方

検索結果ページ＋404ページの作り方

ショートコード自作

WordPress勉強のオススメ書籍

momo

参考にしたのはこの3冊！

momo

知識の定着には繰り返し「見る、書く」がいいね！

まとめ

#30DAYSトライアル #3rd
DAY18,19：Wordpress(11,12)

無事完走〜！！
とはいえ、最後は駆け足だったりまだまだスキル不足を実感。
引き続き学びます♪

「Wordpressで制作できる」

と言ってもいろんなレベル感があること、今自分がどこのレベルにいるのか、なんとなくでもつかめたことがよかった！

— mito@ひよっこwebデザイナー (@mito_works) December 17, 2019

mito

これからは、案件をこなしつつ、知識を定着させていこうと思います！

#30DAYSトライアルのコンテンツと参考書を併用して進めると挫折せずに取り組めました。

コンテンツのわかり易さに感謝です！

独学でもそうでなくても物事を継続させようとすると、気分が沈んだり、逆に上がり過ぎたり、そういう紆余曲折があると思います。

momo

なぜなら人間は続けられない生き物だから・・なんて言ったりするねw。

仕事につなげるために独学で勉強し、今後も勉強し続けると思います。
今回は、「続けること」にフォーカスしたマイルール10個をご紹介します。

モチベーションを維持してこつこつと積み上げる

継続するためのモチベーション管理これが全てと言っても過言ではないです。

https://twitter.com/mito_works/status/1193170502103134208

mito

私の場合は、擬似的にでも誰かに進捗を報告する状況を作る＋学んだことをアウトプットすることで、モチベーションが保たれることがわかりました。

momo

つまり、行動に対してリアクションがもらえる環境に身を置くということだね！

納得いくまで調べる

子育てや家事に使う時間もあり、時間がないが故、少ない行動量できちんと成果を出していくことが理想です。

momo

そのためには「必要なことを正しいやり方でやる方法」の知識が必要だね！

無駄なことに時間を使ってしまわないように、どのサービスを使って勉強するべきか？
どの書籍を買うべきか？
色々な人のレビューやブログを読んで、概要が掴めるまで徹底的に調べます。

緻密な行動計画

mito

途中で迷ったり立ち止まったりしないようにロードマップが必要です。

2で調べた結果を踏まえて、実行可能な計画に落とし込みます。

具体的にやることがイメージできること。
あとはやるだけという状態にします。

mito

私の場合、せっかちなので、すぐ着手したくなるので、この部分は特に意識しています。
このように、「考える」と「実行」を分けた方が見切り発車による失敗を防げます。

計画作成のポイントは、

そうすることで、おのずと何時間で、何をしてどんなアウトプットを出すべきか明確になり、無謀なスケジュール作成、ゴール設定をしなくなります。

最終目標はぶらさず、毎日、軌道修正をする

mito

やってみないと分からないことはたくさんあります。なので、ゴールまでの道筋は歩きながら描き足していくイメージです。

momo

1度計画を立てたらOKではなくて、常に計画を立て続けるWordPressのように動的であるべきだね！

日々の細かなTO DOは、最終目標からブレていないか？いつも確認して、
もっといいやり方はないか？
常に考え、臨機応変に軌道修正します。

進まなくてもイライラしない、ちゃんと休む(体調管理)

momo

いつも平常心でパフォーマンスを落とさないために必須なルールだね。

ネットなどで色々な情報に触れることで不安になったり、できないことばかりに目がいってしまうことも。
そんなときもちゃんと休む。休みの予定は先に入れておく。

焦っても焦らなくてもやることをやれはたどり着く場所は一緒。

であれば、焦らず平常心で進みたい。

mito

そうは思ってもなかなかうまくコントロールできていないので、今後も工夫し続けたいです。

困ったら人に相談を

昔ある人に、もっと人に頼ってもいいんじゃない？っと言われました。
人って頼られたいものだよ、と。

私もそうですが、頼られると嬉しいものです。

ただ最低限の礼儀として、相手の時間を使うことに対する感謝とちゃんと自分でも調べて考え、仮説を持った上で相談するようにしています。

自分の現在地を客観的に評価する

momo

適切な自己評価を行い、市場のどこの部分、場所で力を発揮できるのか？見極めるのに重要だね

勉強は何かの目的やゴールがあってするのも。
そして、仕事につながる勉強は、誰かに評価される、必要とされるスキルを身につけなければ意味がないと思います。

なので、学生時代の定期テストのように、自分の実力を測れるテスト（基準となる指標）を自ら受けるようにしています。

フィードバックを積極的に取りに行く

より速く自分をブラッシュアップさせるための一番の近道だと思っています。

自分で設定した目標に、他人がわざわざフィードバックをくれるようなことは稀です。

でも、自分をブラッシュアップさせるためには、足りないところや逆に強みを知るには他人のフィードバックが不可欠です。

mito

フィードバックは何を言われるかわからないので少し怖い・・。
しかし、自ら積極的にフィードバックを取りに行くことで、受け入れられる耐性もつきます。

momo

正しい自己評価（自分を客観的にみる）にもつながるね。

はじめが肝心、0→1は人から学び、1→2は書籍から

何かを0→1にするのはすごく労力がかかります。人だけでなく、勉強や仕事も出会い方が大事だなと。

なので、0→1にするのは、オンラインでもオフラインでもいいので、学びたいと思う人から学び、継続できると思える環境に身を置くようにします。

1→2にするのは、パズルのピースの空いた部分を埋めるように書籍からコツコツと学びます。

守破離

これはよく言われていることですが、まず型通りにやってみる。
疑問に思ったところを少しずつ変えていく。
最後はオリジナルを作る意識でいます。

まとめ

改めて見返すと、ルールとして作っているもののできていないな〜ということもたくさんあります。

まずは言語化することで、できていない部分を改善していこうと思います！

mito

続けるためのヒントになれば嬉しいです。

今回は3ヶ月間毎日twitterに投稿を続けていた1日1サイトレビューの総集編です。
毎日コツコツと1日1サイトレビューをやってよかったことや学びをまとめます。

momo

1日1サイトレビューは終わりにするの？？

mito

次にやりたいことが見えたので1日1サイトをレビューするという意識的な取り組みは終わりにしますが、継続的に色々なサイトを観察し続けようと思います！

mito

1日1サイトレビューってなに？という方はこちらをご覧ください。

Webデザインのインプットを増やしたい！それなら#1日1サイトレビューがおすすめです。こんにちは、mito（@mito_works）です！ 6月から開始した1日1サイトレビューも3週間が経過しました。 今回は、1日1サ...

1日1サイトレビューで気づいたステキなサイトに共通している2つのことこんにちは、mito（@mito_works）です！ 最初の頃は、1つのサイトのアニメーションやカラー、デザイン、フォ...

1日1サイトレビューで意識した観察視点

サイトは何かの目的やゴールのために作られているものなので、細かなデザインや表現手法だけでなく、誰向けのどういう目的で作られたサイトか？も想像しながら見ることを意識しました。

momo

枝葉の部分ばかりに気を取られずに、森全体も見るようにしたということだね！

#1日1サイトレビュー で観察していることまとめ

・サイトの目的は？（なんのためにつくられたか）
・サイトのゴールは？（どういう状態になってほしいか？）
・ターゲットの深堀
・ターゲットに基づくデザイン（カラー/雰囲気（世界観）/ フォント）

デザインをするときのヒアリングにも使えそう！

— mito@ひよっこwebデザイナー (@mito_works) August 24, 2019

1日1サイトレビューでの3つの学び

学んだことをざっくり分類すると3つに分けられました。

mito

言い換えると「ブランディングの仕方、素人との違いの出し方、情報の整理整頓の仕方」といった感じです。

世界観の表現手法は7つの要素の組み合わせ

mito

本当はもっと表現手法があるかもしれませんが、あくまで私がサイトレビューで気づいたことです。

この7つの要素の組み合わせで表現されていました。

事例①

フリーハンドの線、有機的な図形、紙のような触覚的テクスチャー、手書きフォント。
可愛らしく、手作りの優しい世界観が表現されています。

#1日1サイトレビュー
女の子のアイコンのインパクトをそのまま細部に使い印象に残るサイト。
ぶれない軸を感じます。

うふふどーなちゅhttps://t.co/2wwtoax1uh pic.twitter.com/F1mxKOgr7s

— mito@ひよっこwebデザイナー (@mito_works) August 15, 2019

事例②

勢いのあるペイント文字、明るい黄色、ストライプの視覚的テクスチャーでおしゃれで都会的な世界観が表現されています。

#1日1サイトレビュー
背景を手書き風にするだけで生き生きとした雰囲気に。水彩、ペンキ、手書き文字を効果的に使っていて素敵です。

Starbucks breakfasthttps://t.co/oZdpPPs1b8 pic.twitter.com/2hcQMXfap3

— mito@ひよっこwebデザイナー (@mito_works) August 19, 2019

事例③

写真をメインに動的な空間の使い方を工夫して、惹き込まれるような世界観が表現されています。

#1日1サイトレビュー
芸能人のオフィシャルサイト。商業的なサイトとは一味違う、作品として魅せる工夫やブランディング、世界観の作り方が勉強になります。

宮崎あおい　オフィシャルサイトhttps://t.co/k0DfxYACsc pic.twitter.com/PfWSkd6kmU

— mito@ひよっこwebデザイナー (@mito_works) September 4, 2019

事例④

海を表現する波線、有機的な図形、砂などの触覚的テクスチャーも多用されていて、海辺の近くのゆったりできるホテルという世界観がきちんと表現されています。

#1日1サイトレビュー
泊まってみたい！行ってみたい！と思わせるデザイン。
世界観がきちんと整えられているからなのだなと。

うみのホテルhttps://t.co/WWUBOafhwy pic.twitter.com/cHtf4P4n9R

— mito@ひよっこwebデザイナー (@mito_works) August 21, 2019

事例⑤

特徴的なフォントと配色で世界観を統一するパターン。見事です。

色使いや文字のバランスが見事。
メインフォントはデザイン書体、メインカラーは赤と緑でなかなか難易度の高いデザインだと思う。#1日1サイトレビュー
たかしま農園https://t.co/gjEK7n5Ubj pic.twitter.com/hGlGNvaJvj

— mito@ひよっこwebデザイナー (@mito_works) July 15, 2019

こだわりは細部に宿るということ

作り自体は、要素の繰り返しでシンプルでもホバー時やクリック時の動きや、ボタンやオブジェクトの微妙なグラデーションで雰囲気は随分変わります。

事例①

「つらぬけアソビゴコロ。」というメッセージ通り、細かなアニメーションでワクワク感があります。

#1日1サイトレビュー
余白やマージンが広めに取られていてわかりやすいサイト。
さみしく感じないのは、細かいアニメーション設定の効果だと思う。

サカモトhttps://t.co/5E19CAaMS8 pic.twitter.com/mLzdThAL55

— mito@ひよっこwebデザイナー (@mito_works) August 22, 2019

事例②

スクロールすると要素がフワッと出てくるアニメーション。動画の埋め込み。背景と部分的なイラストの重ね方。程よい手書き感が心地よいです。

#1日1サイトレビュー
メインビジュアルのピンボケ感、スクロールした時の背景写真、色合いがすごく好み。
雑誌と動画の中間の動く読み物。
ターゲットから導きだされた配色だなぁと思った。沖縄に行きたくなる！！

久米島ぬちぐすいな旅https://t.co/TtVgKMO7Ff pic.twitter.com/MJRUbfVY5b

— mito@ひよっこwebデザイナー (@mito_works) August 8, 2019

事例③

要素の並べ方はシンプルだけれど、文字の出現のさせ方やグラデーションの細かい設定でとてもリッチな作りに見えます。

#1日1サイトレビュー
ふわっとさせるアニメーション、写真の切り替え方、文字のグラデーション細部に渡ってきちっとデザインされているので
すごく心地いいです。

Beartailhttps://t.co/qfhhMtCO73 pic.twitter.com/urpyU1JBNh

— mito@ひよっこwebデザイナー (@mito_works) August 26, 2019

ブレのない情報設計で見やすが決まるということ

遊びを入れて楽しませるサイトなのか？読み物として読みやすいサイトなのか？で設計の仕方は変わってくるのだなと思いました。

momo

どちらも両立させたい場合はそのさじ加減がポイントだね！

事例①

遊び心がありつつ、きちんと情報設計されているなと思った事例です。

#1日1サイトレビュー
ペン画のアニメーションの動き、読み物の写真のくりぬきを本型になど要所要所に遊び心が散りばめられているけれど、メニューしかり、
情報設計がちゃんとしているな〜と。

株式会社坂ノ途中https://t.co/B7EL443qXc pic.twitter.com/WSW8ffZJwB

— mito@ひよっこwebデザイナー (@mito_works) July 31, 2019

事例②

情報にたどり着くための導線設計がしっかりしています。

#1日1サイトレビュー

特に見てほしいページの導線の作り方。メニューに入れずに、オブジェクトorボタンにしてファーストビューの中に配置することでより強調されて、「何となく見ておいたほうがいいページなのかな」と思わせる効果があるんだなと。

さんすい保育園https://t.co/6n3qgrqqm0 pic.twitter.com/NwYPE1doDR

— mito@ひよっこwebデザイナー (@mito_works) July 22, 2019

#1日1サイトレビュー

色々な図形をうまく配置していて、遊びも加えながら賢そうに、知的に見せる技が特に勉強になります。

コダテルhttps://t.co/pXVLm8psMV pic.twitter.com/Wzlpvez59X

— mito@ひよっこwebデザイナー (@mito_works) July 22, 2019

個人的に好きなサイト

mito

1日1サイトレビューを続けていると、自分の好きなデザインや表現方法がわかってきます。

momo

どんなサイトデザインや表現方法が好みなの？

1. 背景などに動画を埋め込み、動画を自然に使っている(見る人の目に何気なく触れる)
2. 手書きの要素をうまく使っている

mito

控えめに主張しつつ、遊び心があるサイトデザインが好きです！

好きなサイト

#1日1サイトレビュー
雨の中で踊る印象的な動画から始まるサイト。
世界観表現の仕方に新しさを感じました。

Hellolifehttps://t.co/xDdddPvk71 pic.twitter.com/WDDpOs2xDM

— mito@ひよっこwebデザイナー (@mito_works) August 6, 2019

#1日1サイトレビュー
ワクワクするようなコーポレートサイト。見ているだけで楽しいです。
楽しいだけでなく、独自性、技術力やデザイン性の高さがしっかりアピールされています。

W3G合同会社https://t.co/FpuVSirg01 pic.twitter.com/5b3YNZkOCB

— mito@ひよっこwebデザイナー (@mito_works) September 2, 2019

#1日1サイトレビュー
トップで動画が自動再生されるのにサイト自体重くない気がする。
優しい光に包まれたような写真。丁寧に作り込まれた世界観が魅力的です。

タルタルガhttps://t.co/Bt7F462u4e pic.twitter.com/cRD4j8arcA

— mito@ひよっこwebデザイナー (@mito_works) July 24, 2019

mito

皆さんも自分のお気に入りを見つけて、デザインの引き出しを増やしてみてください！

まとめと次のステップ

どちらも実際、自分がデザインする時に役立ちます。

mito

サイトレビューをしていく中で、自分が表現したい世界観やサービス内容も明確になってきたのでポートフォリオのデザインにも活かせました！

mito | Web Designer Portfolio

【初心者&時間のない人必見！】ポートフォリオを2日で作る手順~#30DAYSトライアルDAY18~DAY20こんにちは。mito（@mito_works）です。 コーディングのスキルアップのために挑戦している#30DAYSトライアルの記録...

mito

この動きやレイアウトはどうやって実現するのだろう？ということが気になり始めたので、実際に手を動かし（サイト模写）をして再現できるようになりたいと思います！

来月から、サイト模写にトライします。

すきま時間に続けていたバナートレースも気づけば50個になりました。
（途中からバナーだけでなく、アイキャッチやサイトの一部など色々なデザインをトレースするようになったのでバナートレースからデザイントレースとしています。）

バナートレースが途中から何でもデザイントレースになったけど、50個意識的にトレースしました！
並べると達成感ある！！でもイラレファイルがすごく重くなる。。 pic.twitter.com/YWYIF3GHEb

— mito@ひよっこwebデザイナー (@mito_works) September 10, 2019

mito

一つの区切りとして50個のトレースで得た学びとTipsをまとめたいと思います。

この記事は、今からトレースを始めようとしている人。特にトレースするとどんな効果や学びが得られるのか予習したい人におすすめです！

トレースの目的

こちらの記事にも書いていますが、デザインの引き出しを増やすことと、ツールを使いこなせるようになるために始めました。

デザイン力アップを目指して、バナートレースはじめます！こんにちは。mito（@mito_works）です。 デザイン力アップのためにバナートレースを始めることにしました。 ここでは、私な...

段階ごとの学び

必ずしも10個区切りではないのですが、段階ごとの学びの変化としてわかりやすいので、数で区切って振り返ってみます。

1~10個

Photshopのみでトレース。
やればやるだけどんどんトレースのスピードが上がり、使える手法も増えることを実感。

フォント選びや素材選びなど本来の手を動かす以外の探す作業に時間が取られていました。

11~20個

illustratorのみでトレース。
illustratorの操作を覚えつつ、雰囲気にあった素材、見本に近いフォント選びなどが早くなってきました。

illustoratorがまだまだ不慣れで、1つの小さなオブジェクトを作るだけでもかなり時間がかかっていました。

21~30個

illustratorとphotshop両方でトレース。
再現できないデザインが減りました。
時間も1時間以内でそれっぽいものに再現できるようになりました。

写真加工、文字の変形など細かい部分の再現力がまだまだ。

【すぐできる！バナートレースの始め方】デザイン初心者がPhotoshopとIllstratorでやってみたデザイン初心者がバナートレースを2ヶ月やった体験談。やり方とバナートレースで得られたものを詳しく解説します...

30~39個

illustratorとphotoshop両方でトレース。
バナーにとらわれず、気になったデザインを自由にトレース。

トレースの目的を決めて30~1時間以内に終わりそうなものをトレースしました。

mito

「アイキャッチのヒントになりそう、今作っているデザインのヒントになりそう」などトレースするだけでなく、極力すぐに自分で実践で使えそうなものを選びました。

40~50個

応用して使うことを念頭に置いて、本にまとめられているようなデザインのパターンを意識しながらトレース。

かけだしWebデザイナーが実務で何度も繰り返し使っている本当にためになるデザイン本こんにちは、mito（@mito_works）です！ 今回は、最近、使用頻度が高い、デザイン参考書のご紹介です。 ここで紹介する...

デザイン自体を、フォントの種類やサイズ、背景デザイン、オブジェクトの配置場所、色味など色々な角度からみられるようになりました。

mito

自分がデザインを作るときに「あのトレースのパターン」というように応用して使えるようになってきました。

トレースで気づいたTips

フォント編

• ヒラギノ角ゴはフォントスタイルがたくさんあり、表現の幅が広い
• 手書きフォントは線が太くなくてもスタイルが違うというだけで強調になる
• ただまっすぐに並べるだけでなく、斜体にしたり、アーチ状にしたり、上下にずらして配置させることで印象がかなり変わる
• 文字の加工にはillustratorが向いている

mito

ヒラギノ角ゴはオーソドックスすぎて使っていなかったのですが、文字間を広げたり太さを変えると随分印象が変わるので使いやすい書体なんだなと学びました！

momo

いいなと思うフォントはどんどんインストールして、トレース以外でも使ってみると、フォントの引き出しも増えるよ！

mito

自分の好みのフォントもわかってきます！

背景

• 目立たせたいもの（人物）と背景は別々に加工して背景をぼかすと雰囲気が出る
• 文字の色を意識して背景選びをすると余分な加工が減る
• グラデーションやパターン模様、素材感を出すような背景など場合によって使い分けられるようになると良い

mito

一色だと思っていた背景。実はグラデーションがかかっていたり、微妙に色を変えたストライプだということに気付けたりしました。

原則・規則性

• 文字やオブジェクトの配置はいくつかパターンを理解しておくと応用できる
• 文字の強調もパターンを理解しておくとよい

mito

本を片手に、「これはこのパターンに近いかな」と分類分けも意識しながらやっていました。

あるあるデザイン

posted with ヨメレバ

ingectar-e エムディエヌコーポレーション 2019年01月

楽天ブックス

Amazon

Kindle

ほんとに、フォント。

posted with ヨメレバ

ingectar-e ソシム 2019年03月

楽天ブックス

Amazon

Kindle

次のステップ

できる幅は広がったものの、illustratorとphotoshopの操作自体はまだまだ遅いなと実感しています。

mito

次はショートカットキーを使いこなすなど効率的にツールを使いこなす目線でトレースを続けようと思います！

今回はillustratorの勉強法についてです。

mito

私自身、独学で学び、ロゴやアイキャッチを作れるレベルになりました。今では、photshopよりもillustratorの方をよく使っています。

momo

独学でどのように習得したのかを3つのステップに分けて解説するよ！

スクールに通う時間や、お金がないから独学で学びたいけれど、本当に学べるの？と思っている人、サクッと学んで最低限使えるようになりたいと思っている人にオススメな記事です。

自分の中でのゴール設定

illustratorは文字の加工やイラストの作成を得意とするツールです。
まずは、ロゴ制作と名刺制作ができることをゴールとしました。

illustrator習得の3つのステップ

効率的に学ぶことを意識して3つのステップを用意し、学習を進めました。

オンライン学習を利用して使い方の基本を学ぶ

全く知識がない状態で本を読み理解していくのは大変です。
実際にツールを使っているところを見ながら手を動かした方が効率よく習得できます。
基本的な使い方や便利なショートカットキーなどは動画学習サービスschooを見て学びました。

mito

音声と視覚の両方を使って学習できるのが動画のいいところです。最初に苦手意識を作らないためにも動画学習、オススメです。

参考書を使って手を動かす

基本的な操作方法の知識をインプットしたら、次はさらに様々なバリエーションの操作方法をインプットしていきます。

mito

参考書を使って体系的に学ぶことを意識します。

本1冊を一通り試します。

Illustratorトレーニングブック

posted with ヨメレバ

広田正康 ソーテック社 2018年01月

楽天ブックス

Amazon

Kindle

momo

この時のポイントとしては、途中で挫折しないようにあまり分厚い本を選ばないことだよ！

逆引きとして利用できる本も合わせて用意しておきます。

Illustrator しっかり入門 増補改訂 第2版 【CC完全対応】

posted with ヨメレバ

高野 雅弘 SBクリエイティブ 2018年09月22日

楽天ブックス

Amazon

Kindle

Illustrator　10年使える逆引き手帖

posted with ヨメレバ

高野雅弘 SBクリエイティブ 2014年06月24日

楽天ブックス

Amazon

Kindle

デザインをトレースする

操作を一通り覚えた後は、ひたすら実践です。

mito

デザイントレースを行い、知識を定着させます！

【すぐできる！バナートレースの始め方】デザイン初心者がPhotoshopとIllstratorでやってみたデザイン初心者がバナートレースを2ヶ月やった体験談。やり方とバナートレースで得られたものを詳しく解説します...

まとめ

使用頻度が低い操作方法は、時間が経つと忘れてしまいます。
トレースで繰り返しillastratorを使うことで、よく使うもの、あまり使わないものの区別がつくようになり、押さえるべきポイントもわかってきます！

6月から開始した1日1サイトレビューも3週間が経過しました。
今回は、1日1サイトレビューを始めるきっかけから実際にはじめてどんな気づきがあったのか？という内容をお届けします。

という方の参考になれば嬉しいです。

#1日1サイトレビューってなに？

毎日1サイト、自分の気になるサイトをレビューし、#1日1サイトレビューというハッシュタグをつけてtwitterに投稿するものです。

Webサイトをみて自分なりの考察を行い、自分の言葉でアウトプットするということが目的です。

#1日1サイトレビュー

株式会社デジタル・アド・サービスhttps://t.co/2LVnaWSGMK

情報の目立たせ方が秀逸！
個人的には目玉焼きのような手書き風の楕円形が好きです。
きちんとした丸じゃないというだけで強調になるという発見がありました。 pic.twitter.com/jxtciiPOVO

— mito@ひよっこwebデザイナー (@mito_works) July 5, 2019

mito

色々なやり方があるようですが、私は自分用のストックメモとして日記アプリに書いたものをキャプチャでtwitterに共有しています。

#1日1サイトレビュー

HELLO CYCLINGhttps://t.co/JRSkPfi28g
サービス内容がわかりやすく表現されている上にワクワクするようなサイト。
デザインの威力、感じます。 pic.twitter.com/D9eAnlbdtF

— mito@ひよっこwebデザイナー (@mito_works) July 6, 2019

#1日1サイトレビューをはじめたきっかけ

デザインの引き出しを増やすためにどうしたら良いか？と考えて 、まずはたくさんデザインに触れて、「なぜこういう作りなのか？」「なぜこういう印象に見えるのか？」考察することをしようと思いました。

それが、#1日1サイトレビューです。

また、デザインの師匠さまたちもデザインはセンスではなく、「デザインは組み合わせだ」そしてセンス自体も「センスは知識から」とおっしゃっております。

アイデアのつくり方

posted with ヨメレバ

ジェームズ・ウェッブ・ヤング/今井茂雄 CCCメディアハウス 2012年06月

楽天ブックス

Amazon

Kindle

センスは知識からはじまる

posted with ヨメレバ

水野学 朝日新聞出版 2014年04月18日

楽天ブックス

Amazon

Kindle

mito

バナートレースのように実際トレースをするのが良いと思いますが、Webサイトはトレースに時間がかかりそうだなと思い、観察して言葉でアウトプットするということをはじめました。

【すぐできる！バナートレースの始め方】デザイン初心者がPhotoshopとIllstratorでやってみたデザイン初心者がバナートレースを2ヶ月やった体験談。やり方とバナートレースで得られたものを詳しく解説します...

#1日1サイトレビューをやってよかった点

mito

毎日15分~30分程度で楽しく無理なく続けられました。

#1日1サイトレビューのオススメポイント

1日1サイトレビューを3週間続けた結果、サイトデザインのお仕事でも良い影響が出てきました。

クライアントさんの「こんな感じのサイトにしたい」という要望に対して「イメージでいうとどれが近いですか？」というように話を詰めていくスピードが上がりました。

mito

デザインするときも、人と話をするときもデザインという形に具現化するスピードが格段に上がります！

気負わずまずは1日15分から。
ぜひ試してみてください。

今回は、デザイン初心者がPhotoshopとIllstratorでバナートレースを30本続けた結果、どうなったのか？何がわかったのか？どのようにモチベーションを維持して30本のトレースを達成したのか？という内容をお届けします。

という方の参考になれば嬉しいです。

バナートレースで学べること

あまりに学んだことが多く、これ以降の文章がとても長いので結論から書きます。

学べることは、

「デザインに対してどのようなツールや手法を使って実現するか理解でき、自分で再現できること」

です。

mito

料理で例えるのであれば、カレーを食べてこれは人参とジャガイモと豚肉を使っていて、無水調理で作っているな・・と分かり同じ味を作れるイメージです。

momo

そこまでできるようになると、もっと甘くしたいから、ジャガイモをさつまいもに変えて、黒糖を入れてみようなど自分なりのアレンジができるようになるね！

つまり、目で見たデザインを自分の手で再現できるだけではなく、アレンジして自分のデザインに使えるようになります。

バナートレースとは？

「トレース」とは日本語で「模写、真似する」という意味です。

今回はバナー（広告）に絞って模写をしました。

バナートレースでの素材の選び方

1. 背景単色もしくは1枚の写真＋文字
2. ①＋文字＋簡単なオブジェクト
3. 背景グラデーションやストライプや切り抜き写真＋②

mito

まず文字の余白の取り方、フォントサイズの強弱、フォントの種類を重点的に学び、徐々にイラスト入りや切り抜き写真入りなど要素を増やしていくイメージでやりました。

バナートレースをするときの手順（取り組み方）

1. Pintarestでトレースするバナーを見つける
2. 近しいフォント、素材を探す
3. ガイドを引いて配置場所やサイズ感を把握する
4. PhotoshopとIllustratorを使い分けてトレースする
5. フォント、カラーその他気づいたことをまとめる

やりっぱなしではなく、⑤の気づきをまとめるということは後から見返して学びが深まるので、やってよかったなと思います。

最初の頃は②の近しいフォントや素材を探すに時間を多く使ってしまいがちです。

mito

完璧を目指さずある程度妥協も必要。ちょっと違うけれど今の自分の実力で探せるのはここまでと見切りをつけて次のステップに進むことが大事です。

momo

妥協の目安として時間で区切るのは有効だよ！

バナートレースを継続的に続ける秘訣

上記のことを繰り返すことが継続的に続ける秘訣です。

mito

私の場合、twitterやコミュニティで「やります！」と宣言して自分なりのまとめをつぶやいていました。特にやらないと何か言われるということはないですが、心理的な強制力を作る上で有効だと思います！

momo

思わぬタイミングでコメントや励ましの言葉をかけてもらえたりして、励みになることもあるよ！

＜#バナートレース #20＞
シンプルなバナーほど難しい。。

パスを変形させて、文字の流れるような加工にすること、背景に沈まないように背景の色と文字色のバランスを考えること。

文字が見えずらくなって残念＞＜。
イラレは文字をアウトライン化すると元に戻せないから断念してしまいました。 pic.twitter.com/bsW29qTUvt

— mito@フリーランスWebデザイナー (@mito_works) May 24, 2019

バナートレースのペース配分と内容

2019年3月にPhotoshopだけを使い10本トレースをしました。

この時に、やればやるだけどんどんトレースのスピードが上がり、Photoshopの使える手法も増えることを実感。

mito

ちなみにこの時、デザインはもちろん、Photoshopも触ったことがない初心者でした。

出産＆その後1ヶ月の休養を経て、2019年5月にトレースを再開。
Photoshopは、ある程度使えるようになったと思ったので、次はIllstratorを使えるようになりたいと思い、PhotshopとIllastratorを併用して取り組みました。

1回目のトレースの時は、2時間くらいかかっていたので、かけすぎかなと思い、2回目のトレースの時は特に時間を気にしました。

具体的に、バナートレースを通して成長した点

PhotshopとIllastratorを併用することで再現できないデザインが減った

Photshopだけの時は花びらや傘などオブジェクトの再現ができていませんでした。
よく使う手法もわかってツールを使うスキルとデザインの幅が格段に上がったと思います。

見本と近しい素材（画像やイラスト）を探せるようになった

最初は、画像選びだけでもすごく時間を費やしていましたが、徐々にバナーの雰囲気にあった無料の写真やイラストを探せるようになりました。

mito

トレースでよく使った無料素材はこちらの2つです。

Unsplash
高品質な素材が無料で提供されています。

イラストAC
素材数が多く、目的にあったイラストが必ず見つかります。

見本により近いフォントを探せるようになった

最初は、明朝体、ゴシック体という大きなくくりでの区別はつきますが、明朝体の中での違いがよくわかっていませんでした。

mito

「たづがね角ゴシック」と「ヒラギノ角ゴシック」って何が違うか見分けがつかない！！という感じです。

そしてトレースした際にフォントがしっくりこなくて違和感がありましたが、徐々に「これだ！」というフォントを探せるように。

セリフをさらにくづしたSnell Roundhand。イタリック体だと王道感にプラスしておしゃれに見える

というようなフォントの考察もできるようになりました。

バナートレース #04 -Snell Roundhandで高貴におしゃれに-トレース結果 ※左：Sample 　右：Trace Time 50min Tool illustrator Fon...

バナーを見てどういう手法を組み合わせているのか分かるようになった

結果、大体どれくらい時間がかかるか見積もりが立てられるように。

mito

ただ、シンプルで余白があるものほど目に見えない工夫や技が潜んでいて想定以上の時間がかかるということも・・。 シンプルほど奥が深いということも同時に学びました。

デザインの4原則「近接」「強弱」「整列」「反復」を意識して観察できるようになった

ただなんとなく見本に合わせて文字やオブジェクトを配置することが少なくなりました。どういう効果を狙っているのかわかるようになってきたような気がします。

mito

こんな風に考察しています。

バナートレース #13 - スポーティーの作り方 -トレース結果 　 ※左：Sample 　右：Trace Size 300×250 Time 60min Tool illu...

「ポップ」「スポーティー」など抽象的な言葉をデザインで表現するためにどのような手法を使うのかわかるようになってきた

まだまだだとは思うのですが、トレースをして少しわかりかけてきました。
デザインの引き出しを増やすってこういうことなんだと思います。

mito

こんな風に考察しました。

バナートレース #09 - ユーモアの表現方法 -トレース結果 　 ※左：Sample 　右：Trace Size 300×250 Time 35min Tool ph...

バナートレース #10- パターンの色と大きさを変える & アートボードからはみ出した部分を無視して書き出す-トレース結果 　 ※左：Sample 　右：Trace Size 360×240 Time 90min Tool il...

バナートレース #12 - かわいさの作り方、簡単！波オブジェクトの作り方 -トレース結果 ※左：Sample 　右：Trace Size 1964×900 Time 90min Tool Ph...

バナートレース #13 - スポーティーの作り方 -トレース結果 　 ※左：Sample 　右：Trace Size 300×250 Time 60min Tool illu...

バナートレース #15 - 現代的、ファッショナブルな女性らしいデザインとは -トレース結果 　 ※左：Sample 　右：Trace Size  360×214 Time 60min Tool i...

↑ここからフォントの考察もできるように

見えてきた課題

背景の効果的なデザイン手法

背景は、写真以外にものグラデーション、ストライプ、パターンで表現の幅が広がるということがわかりましたが、まだ使いこなせていません。

バナートレース #05 -グラデーションとオブジェクトで春らしく-トレース結果 ※左：Sample 　右：Trace Size 300×250 Time 90min Tool il...

バナートレース #06 -リボン作成＆ワープで変形 -トレース結果 ※左：Sample 　右：Trace Size 978×330 Time 60min Tool il...

バナートレース #11 -雨の作り方、シアーで平行四辺形、パスファインダーの分割で可愛らしく、アートボードに中心線を引く -トレース結果 　 ※左：Sample 　右：Trace Size 400×600 Time 120min Tool ...

mito

特にブラシ効果がまだ使えていません。

バナートレース #14 -ゴールドの作り方 -トレース結果 　 ※左：Sample 　右：Trace Size　980×250 Time 60min Tool il...

適切な文字の加工

文字をそのまま使うのではなく、加工することで随分見え方が変わるということがわかりました。

バナートレース #07 - 文字の縁取りと切り取り、一部回転方法 -トレース結果 　 ※左：Sample 　右：Trace Size 440×270 Time 60min Tool il...

バナートレース #11 -雨の作り方、シアーで平行四辺形、パスファインダーの分割で可愛らしく、アートボードに中心線を引く -トレース結果 　 ※左：Sample 　右：Trace Size 400×600 Time 120min Tool ...

可愛らしく

バナートレース #12 - かわいさの作り方、簡単！波オブジェクトの作り方 -トレース結果 ※左：Sample 　右：Trace Size 1964×900 Time 90min Tool Ph...

爽やかに

バナートレース #20 - photoshopで背景の余分な部分を消す、illustratorで文字の変形 -トレース結果 　 ※左：Sample 　右：Trace Size 1238×536 Time 70min Tool p...

mito

届けたいターゲットやデザインコンセプトに合わせて、思い通りに文字を加工するまでには至っていません。

写真の効果的な加工

「ああでもない。こおでもない」と時間がかったけれど見本に近づけず・・。

もっともやり直したいものの一つです。

バナートレース #18 -文字の均等配置・両端揃え、背景透過の効果、自然体なたづがね角ゴシック -トレース結果 ※左：Sample 　右：Trace Size 300×210 Time 60min Tool ph...

結局バナートレースで何を学べるか？

一言で言うと、「ツールの使い方」と「デザインを見る目が養われる」ことだと思います。

mito

「このデザインいいな」とただストックしているだけでは得られるものは少ない。とにかく手を動かさなければ習得できないなと思いました。

バナートレースだけでは学べないこと

トレースは誰かが作ったものをあくまで模写するということ。なのでコンセプト、ターゲットなどを考える部分が抜けています。

トレースで身につけたものを実際の案件で使うというように「練習」と「実践」を行き来するのが良いなと思いました。

まとめ

トレースはあくまで手段！ですが、トレースを通して自分のデザインスキルを上げるためにこれからも使いたいです。

 

バナートレースからデザイントレースへ。50個トレースしてわかったこと＆Tipsこんにちは、mito（@mito_works）です！ すきま時間に続けていたバナートレースも気づけば50個になりました。 （途中...

mito

バナートレースの次に何をしたらいんだろう？という方向けの記事はこちらです〜！

momo

試行錯誤しながら色々試したことを紹介しているよ！

【デザイン独学】お仕事に繋げるために、バナートレースの次にやったこと 今回はバナートレースをいくつかやって「次に何をすればいいんだろう？」と思っている方 向けに私が実際にやったことをまとめます。 ...

]]> https://mito-lab.com/banner-trace-30-report/feed/ 7