【厳選100記事】アウトプット!未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをまとめました。




中の人
こんにちは。いつも他人の記事ばかりツイートしているcoffeebreakの中の人です。

この記事は未経験の人や新米Webデザイナーさん、会社の情報共有がめんどくさい人、アウトプットが本当にめんどうな人向けに、私がデザインノウハウの記事を探してtwitterでツイートしています。記事を探してきては一人で「お宝記事!」と喜んでツイートを繰り返し、後日ブログで定期的にまとめるというtwitterのつぶやきを二次的に活用したちょっとせこいコーナーで、

今回は年末SP!

見出しの通り、100記事全部紹介しちゃいます!

このアウトプット記事は14,000字の大作なので全ての記事を確認するのは大変だと思います。
だから、読むのがしんどくなったら速攻で離脱するのをおすすめ致します。

とりあえず、最新のアウトプット記事だけでいいやという人は前回のアウトプット記事だけご確認いただければ幸いです。

【厳選20記事】フォロワーが良いと評価したデザインノウハウのまとめ

第1回目の厳選記事

厳選記事その①
広告用バナー、こうやって考えてつくってリサイズしてます(実演付)
概要
フォトショップの画面をキャプチャしてバナーリサイズ方法を公開した記事。
リサイズは素材の拡大縮小を行うのでスマートオブジェクトを推奨しています。
スマートオブジェクトに変換する事で素材の画質が維持できるのでリサイズには最適ですよね。

厳選記事その②
バナーを短時間で効率よく量産する時のポイント
概要
バナー制作フローをテキスト文字段階から完成まで丁寧に紹介しています。
効率化を計るためのテンプレートの紹介や、見栄えを良くするためのモノクロで視認性を確認するといったすぐにでも活用できるノウハウを紹介しています。

第2回目の厳選記事

厳選記事その③
成果の出るバナーは簡単に作れる│参考にすべきポイントと業種ごとの事例
概要
デザインはできるけど、引きが弱いと感じたらコレを読むといいかも。
<コメント>
有名な広告会社の記事です。ジャンル別に必要な鉄板素材とキャッチの組み合わせを惜しみなく紹介しているので、今でも参考になります。
あと、リスクルさんは高確率でリツイートしてくれます!拡散力高いです!

厳選記事その④
新人デザイナー育成 バナートレース100本への道①【1本目~10本目】
概要
【貴重!】先輩デザイナーからデザイン解説があるので読むだけでノウハウが身につく記事です。トレース60本までは掲載されていて100本までが楽しみです。
<コメント>
バナートレース100本目指して連載中の記事のようです。先輩デザイナーとの会話調のやり取りが分かりやすくで思わず読んでしまいます。
正直100本のトレースはキツいですね。私が新人なら多分逃げ出しますw 凄い技術力がつくと思いますが..

第3回目の厳選記事

厳選記事その⑤
勝てるバナーレイアウト20選!│レイアウトに悩んだ時の虎の巻
概要
【王道】鉄板バナー構成の数々です。後はデザインで雰囲気を変えれば複数種類制作可能ですね。
<コメント>
リスクルさんの記事です。バナー構成を検証して、獲得できるものばかりをひたすら集めた記事です。
広告バナーはある程度テンプレ化しているので、このような記事があると大変重宝します!
いつもリスクルさんは高確率でリツイートしてくれます!感謝しています!

厳選記事その⑥
「45分」で作れる! 高品質バナーの作り方!
概要
【簡単】バナー制作の時短テク満載!広告クリエイティブはスピード勝負だから必須スキルですね。
<コメント>
こちらもリスクルさんの記事です。バナーを時短で作るには、全てオリジナルデザインではなく、組み立てやすい構造と置き換えやすいデザインパターンなら程度の短時間で出来上がってきます。ネット広告のバナーは大量に用意していくので、現場ではは1本15分くらいで作っていると思います。

第4回目の厳選記事

厳選記事その⑦
デザインをブラッシュアップする際のチートシート – dwango creators’ blog(ドワンゴクリエイターズブログ)
概要
「野暮ったいんだよ」下町ロケットでも使われたセリフ。このデザインチート記事を読んだらその意味がしっくりきた。
<コメント>
どことなく、プロモーションとか知っていて記事じたいにクリエイティブというか精通したものがあるなと感じていたらドワンゴさんの記事でした!
なんでもかんでも積み込んで「野暮ったさ」が全面にだしてしまうクリエティブもありますが、ブラッシュアップして仕上げていこうねというお話。
あと、下町ロケットのドラマで同じフレーズがあったのでちょっと便乗しました。こんな見出しの書き方もアリかもしれないです。

厳選記事その⑧
ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめ
概要
オプティカルとメトリクスについて。肌感ですがwinのオプティカルでトラッキング75pxがiphoneのデフォルトの文字間に近いです。
<コメント>
カーニングとは何?を詳しく書いている記事。他のカーニング記事は独特なスキルを紹介したものが多かったですが、この記事はオーソドックスで分かりやすいないようでした。

第5回目の厳選記事

厳選記事その⑨
バナー制作におけるデザイナーの頭の中 – dwango creators’ blog(ドワンゴクリエイターズブログ)
概要
再ヒアリングの理由や提供素材についてとか、現場起こる「あるある」をバナー完成までレビューしています。さてfixはどんな仕上がりなのか?
<コメント>
ドワンゴさんの記事はいつも人気がありますね。
記事の中身ですが二コ動のキャンペーンバナー制作を現場デザイナー目線でレビューしたもので、このように現場の生の成果物をリアルに伝えている事がWebデザイナーを目指す人にとって貴重な情報なのではと考えています。実際私も実務以外の情報として他企業の現場記事は新鮮に感じたものです。

厳選記事その⑩
トリミングで印象が変わる!デザイン初心者に覚えてほしいバナー制作テクニック|ForYourImages MAGAZINE
概要
位置関係で印象が変わる記事。印象は体験できるけど、なかなか母数の大きい言葉でまとめるのは難しいのがデザインです。でもきっちり説明してます。
<コメント>
画像のトリミングとキャッチの配置しだいで受け取り側の印象が変わってくるよという内容を解説した記事です。バナーデザインで画像トリミングの技術情報を詳しく紹介した記事は見当たらなかったので、私も「勉強になるな」と思いました。良記事ですね。

第6回目の厳選記事

厳選記事その⑪
現役Webデザイナが教える転職で使えるポートフォリオの作り方
概要
【お宝記事!】未経験だから用意できるポートフォリオの強みを深掘りした記事です。作品作りは強力な武器になります!
<コメント>
私がこの記事を紹介した理由は、具体的に未経験でも作品作りをして中身を充実させる手段を豊富に紹介してるからです。

自分で作る

友人の依頼で作る

行きつけのお店に営業する

これらは私も転職活動中におこなった手段の一つでした。
少ない経験の中で、大勢の応募の中で、どのように目立てば書類選考を通過、面接で話を聞いてもらえるか頭をひねったものです。

厳選記事その⑫
【学生Webデザイナー】ポートフォリオの作り方をご紹介|JobQ[ジョブキュー]
概要
ブラッシュアップは大切とある。後は【架空サイトデザイン】を用意する事。私が転職活動中にやった方法と同じで嬉しい!面接ではデザインの設計力まで深掘りした質問があるのでその対応も必須です!
<コメント>
この記事は、学生目線で書かれたもです。学生のポートフォリオならではのノウハウが紹介されています。とくにブラッシュアップが可能というのは驚きでした。

課題の延長で自分の作品を面接向けにブラッシュアップできるのは学生ならではの特権ですね。

第7回目の厳選記事

厳選記事その⑬
Webデザイナーのポートフォリオの作り方|未経験からWebデザイナーになろう!
概要
実績を載せる方法として、①架空サイトや②友達のサイトをつくる、③営業活動など具体項目を紹介してる記事。②はヒアリングから体験でき納品までの苦労分かるから、一度はトライしても良いかも。
<コメント>
ポートフォリオのテンプレが豊富で、作品の作り方のアイデアをいくつか紹介している記事です。
実践できそうなアイデアも書いてあります。

①架空サイト

②友達のサイトをつくる

③営業活動など

先週ご紹介したポートフォリオ記事と同様のアイデアと、クラウドソーシングの活用をすすめています。
クラウドソーシングはちょっとハードル高いかなと思ったのですが、コンペを活用するのですね。

厳選記事その⑭
デザイナーのポートフォリオの「良くない例」と必要な「伝えること」|TSUYOSHI(弁護士ドットコム・デザインマネージャー)
概要
【納得】誰向けのポートフォリオなの?この考え方はプレゼンや資料作りで大切なノウハウの1つですね。
<コメント>
この記事はポートフォリオの作り方を説明ではなくて、やってはいけないポートフォリオの例を上げて、駄目な事を紹介しています。
個人的に良かったなと感じたのは「だれの為のポートフォリオ」で「だれ向けのポートフォリオ」なのかという事です。
このような資料作りをすることでプレゼン資料の作成能力があると評価されるかもしれませんね!

第8回目の厳選記事

厳選記事その⑮
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方|サルワカ
概要
【基本】コード修正がうまくいかない時は、こいつを友達にするといいです。F12で何度も解決してきました。
<コメント>
でました!とっても詳しいサルワカさんの記事!個人的にはコーディングの情報は詳しすぎて最高ですね。
どのように詳しすぎかというと、このアウトプットした記事はなんと5000文字の情報量!
htmlとCSSの使い方だけで5000文字つかってます!ディベロッパーツールをまだ使っていない、ちょっと苦手という人はサルワカさんの記事を読んで勉強してみましょう!

厳選記事その⑯
【後編】photoshopで作る金色のツボとコツ!未経験でもワンランク上のWebデザイナーなろう!
概要
【フォトショップ始めたての人へ!】私なりの金色グラデーションの作り方を記事にしました。16進数のコピペ、記事内デモ画像のPSDファイルもゲットできますよ!
<コメント>
私の記事にたくさんのいいねとリツイートが!みなさん読んでいただきありがとうございます!
グラデーションの中でも金色って難しいのです。デザインテイストによって色とトーンをしっかり変化させないと、すっごいもっさいデザインになるのですよ!
私の記事では、グラデの色幅をおさえた汎用性がそこそこ高いものを紹介しています。あと、PSDデータと16進数をコピペできるようにしてるので、ほぼ丸コピで活用できますよ!

第9回目の厳選記事

厳選記事その⑰
実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 – IT系女子ログ
概要
【お宝記事!】デザイン編とコーディング編を1本にまとめたボリューム満点の記事 (´,,•ω•,,`)これ、全部やりこんだらデザイン力はかなり上がりますね(´,,•ω•,,`)
<コメント>
記事主さんの文章量が半端ないよね〜。あと見出しが多い!という事はそれだけご自身が試したお題があって、それが有益だったという事ですよね。
中にはちょっとした合間でもできそうな項目もあるので、できる事が真似してみるのもいいのかなと思います。
この記事を振り返ってみたけど、各項目を1週間実践して「◯◯を試して気づいた事」でデザイン記事が書けるなぁ。やってみよっかな〜。

厳選記事その⑱
【7選】photoshopで作るドロップシャドウのツボとコツ!未経験でもワンランク上のWebデザイナーを目指す方法
概要
ドロップシャドウの記事を書きました。濃い薄いシャープな影とか色々用意したので影の作り方が「苦手だな」と思う人は是非真似してください!あとPSDのDLできます!
<コメント>
あ、自分の記事ですね。twitterに投稿しているデザインをみていたら、どうもフォトショップの効果を駆使してないよな〜と気づいたので、熱が冷めないうちにドロップシャドウの記事を書きました。すっごい基本的な表現ですが、これだけ覚えると結構活用できるのです。これからWebデザイナーを目指す人、目指している人、まだまだ新米の人はぜひ身につけていただきたいと思います。

第10回目の厳選記事

厳選記事その⑲
【簡単!】気持ちのよい文字組み(カーニング)をマスターしてWebデザインスキルを磨こう!
概要
Webデザイン初心者向けに【文字組みは難しくないよ】という記事を書きました。文字組みの自動処理と程よい距離感覚を身につけてキレイで整頓したキャッチを作ってみましょう!
<コメント>
フォロワーさんの作品をみてると、まだ文字組みが詰め切れてないよな〜と思ってました。なので、単純にフォロワーさんが悩んでいる記事を書いたのですが、この文字組み記事はいいね155件もいただき評判よかったです!
リツイート27件と評判も上々だったので、どうして人気がでたのか記事にしてみました
何故?発信力の無いWebデザイナーのツイートがひとり歩きしてフォロワーが増えたのか?

いくつかの文字組み方法を紹介したのですが、記事を公開した後もアイデアが浮かんだのでいつか追記しておきたいと思います。

厳選記事その⑳
デザイン上達に必要なのは努力じゃない。「目」だ。|デザイニアになろう!
概要
【なるほど!】目で鍛える。まっすぐな理由で分かりやすいです。同じデザイン構成でも何が違うのか見えてくると思います (´,,•ω•,,`)
<コメント>
この記事は今までアウトプットしてきた記事の中でもかなりの「お宝記事」です!人が考えている事をくみ取る力はWebデザイナーを何年も続けていると「必要なスキルだ!」と気づくはずです。でも、ちゃんと話を聞いても相手が想像している事を100%共有する事は無理です。
でも、出来るだけイコールにする事は可能で、この記事では出来るだけイコールにする簡単な方法を公開しています。

はい!厳選記事はここまで!本当に勉強になりました!

【100記事】ツイートした残りのデザインノウハウ記事のまとめ

主にバナーデザイン構成や工夫する事のアウトプット

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選
・乾燥訴求を調べたら紐付く訴求が見えてきた。

【悪用厳禁!】バナーデザイン|CTRを高める為の心理学14選+事例/Build up
・ダブルサイズから説明してたら親切なのに。でも、おさえておくサイズはまとまってるので便利な記事です。

これは便利!スマホ広告のバナーサイズ、表示位置、呼び方まとめ【保存版】
ダブルサイズから説明してたら親切なのに。でも、おさえておくサイズはまとまってるので便利な記事です。

大量にバナーを作成して見えてきたバナー作成のコツとデザインのポイント。
・構成が作れる人と作れない人の違いはこれですね。構成を分解して再構成してるのはデザイン展開に役立つ。

クリック率が飛躍的に増加するバナー広告の9つの構成とデザイン
・構成が作れる人と作れない人の違いはこれですね。構成を分解して再構成してるのはデザイン展開に役立つ。

【年齢層別・乾燥肌】化粧品・コスメのランディングページ(LP)デザイン5選
・アラサーとアラフォーの違い。乾燥は気にしてるけど、年齢層が上がればそれ以上に気にする悩みがあるみたい。

思わずクリックしたくなるバナー広告をデザインするための14のヒント
・11個のヒントが自分でも意識してる事だった。

イケてるバナーをデザインするための「3つの秘訣」
・イケてるファション系バナーのデザイン構成をまとめてる。ありがたい。

デザイナー視点で見る!イケてるバナーとトホホなバナー~これはトホホ編~
・紹介してるバナーをうまく配信すると案外役立つかもしれないと思うのは私だけだろうか?

デザインクオリティが左右する!クリックされる「バナー広告」の秘密。
・大手広告代理店のトップデザイナーが語るクリックされるバナーデザイン。指標ではなく、デザイン理論で効果改善させるクリエイティブを紹介した非常にレアな記事。勉強になります。

伝わりやすいバナーをデザインする10のポイント(文字の組み方編) : ビジネスとIT活用に役立つ情報
・何故あのバナーデザインが良くできてるか?それが文字組みノウハウでわかる記事。

新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ
・バナーデザインのノウハウがある人とない人の違いがわかる記事。

伝わりやすいバナーをデザインするポイント(装飾編) : ビジネスとIT活用に役立つ情報
・【量産向けノウハウ】バナー構成さえ決まれば、雰囲気の置き換えでデザインがつくれる。

ランディングページ(LP)定番の表現【誘導線】が効果的な理由
・【初心者向け】誘導線を使いこなせば伝わりやすくなります。おすすめです。

バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました | NxWorld
・【情報量が凄い】この記事を一通り学んだら質のいいクリエイティブは作れそう。というくらいまとまってます!

バナーデザインで困ったら試してみたいポイント集
・何か足りないと思った時におすすめです!文字の視認性からクリエイティブの追い込みまで完結にまとめてる記事。

デザイナー1年生必見!伝わるバナーデザイン 10のコツ
・【いいね多数!】デザイナー1年目から凄い人とそうでない人の違いがわかる記事。早く知っておきたかった!

ネットショップ内でクリック率を上げるバナーデザインのコツ
・ちょっとした工夫でかなりのクリック率に変化してます。

デザイン未経験の新卒デザイナーがバナーのトレースを30枚して気づいたこと | Pinto!
・【重要かも!】昔似たことをやったけど、作り込みや文字組みの追い込み具合が吸収できました。コツコツとノウハウを貯めれるのでデザインを未経験から始める方おすすめです。

CTRを上げるバナーデザインのコツ。優れたデザインは必要ない!? – ウェブ部
・【納得】バナーデザインは美しいじゃなく魅力が必要だと思った。

要注意!見落としがちなバナーデザインミスチェックリスト
・【新米デザイナー向け】受託デザインの基本的なチェックリストがまとまってます。具体的なので先輩デザイナーさんと確認しあいながら質を上げるのに使えそう。

ガチンコデザインコロシアム優勝!バナー制作のスピードとクオリティを上げる「俺の引き出し」全公開
・最初、中の人バカやってるなと思ったけどデザイン準備は【超プロ級】の内容でした。さすがプロ社畜。

デザインソフトが入ってないからパワーポイントだけでバナーをつくってみた!
・【必見】馬鹿にして記事を読んだけど、馬鹿にできないやり方でした。インフィードバナーやリタゲのテキストバナーならこれで作れます。

クリック率の高いバナー広告に見られるデザインの特徴とは?(求人市場編)
・求人系バナークリエイティブを色、画像、テキストの割合を調査しています。知っておくと、ぽいバナーを最初から作れるかもしれません。

このデザイン、なんかダメ――その理由は『もっとクイズで学ぶデザイン・レイアウトの基本』が教えます!:MarkeZine(マーケジン)
・こういうクイズ形式でバナーの良し悪しを考察している記事がたくさんあれば上達が早いかもしれない。

【5選】ダイエット訴求のランディングページ(LP)を調査してデザインを研究してみた
・これを読んでも痩せませんが、痩せるデザイン訴求はわかります。

もう迷わない!!クリック率をあげるバナー制作の3原則!|ピクスタアンテナ
・有名素材屋さんがおすすめするクリックされやすい色と画像とキャッチの紹介。

クリック率を上げるバナーデザイン3つのポイント
・さらに3つ目のボタンテキストは、さらにテキストを変えていくとクリックのハードルが変わってきます。

デザイン初心者でもできる?プロっぽいバナーのコツ
・記事見出しの一つ一つがバナー制作のツボを押さえてます。

ユーザーが思わずクリックしたくなるバナー広告の作り方とは? | リスマガ【Web集客の教科書】
・クリックしたくなるキャッチコピーに凄くこだわって書いている記事だと思います。読み応え充分です!

【バナーデザインの基本】おしゃれで押さずにはいられないバナー作成法
・バナー制作の基本のキから、デザイン別、参考サイトまでしっかり網羅してます。

クリックされるバナーの色とデザインは?
・どの色を使えばデザインされたバナーがクリックされるかを書いた記事。私も色を軸にLPのCTAを調査した事あったので気になってました。

【検証】本物のデザイナーだけが知っているCVエリアのボタンは何色がよいか?
・昔は緑、今は赤も増えたけど実はデザイン用途に合わせて色を寄せてる印象もある。

興味を惹きつけクリックされるECサイトのバナーづくり | Tips Note by TAM
・デザインセンス、技術力に定評あるTAMさんの記事。基本的な事を書いてますが参考になります。

主にキャッチコピーのアウトプット

今すぐ効果が出る!クリック率が上がる広告コピーの心理的効果10選
・キャッチコピーを戦略的に考える記事。最後の方の【さらに効果を高めるには】の3選こそプロのノウハウです。

キャッチコピーとは〜刺さらせるために有効な9メソッドと秀逸事例まとめ|ferret [フェレット]
・ターゲット人物像に合わせたデザインを考えて9つのメソッドを掛け合わすとバナーがSSキャラ的に進化します。

簡単に心を掴むキャッチコピーを作るための3つの型。 そして「広告としてのキャッチコピーの役割」とは?
・普段レスポンス重視で制作してると、この記事のように【そもそもコピーって何?】に共感してしまうのではないでしょうか。

目的に合わせたバナー広告のコピーを作るための2つのコツ
・興味付け、体験型といた軸からもキャッチコピーを提案するとバナーデザインが楽になります。

【酵素編】ダイエット訴求のランディングページ(LP)を調査してデザインを3つ選んでみた
・LPデザインの記事書きました。今回は酵素ダイエット訴求のデザインです。ネット広告向けの内容なので、通販とか広告デザインの作り方に興味ある方、息抜きのついでにご覧ください。

主にバナーデザインのアウトプット

脳科学でつくるアイキャッチ・バナーの集客力
・【よく使う手法】そのキャッチコピーに対してユーザーがどんな心理を抱いてるかを解説。買い手を想像してデザインに落とし込むのが身につくと自分だけのデザインがたくさんできます。

知っておきたいWEBデザインの3つの基本セオリー
・【デザイン力の実感】3つ目のキャッチは大胆にを使いこなせれば、またはダメもとで提案できれば1UPですね。

クリエイティブな広告やポスターのデザインから学ぶ!参考にしたい文字レイアウト
・フォントを変化させたり、特定のカルチャーに明るいユーザー向けにキャッチを考える事でもアイデアは広がります。

そのコピー、刺さってる? 魅力的なコピーの考え方 具体例5つ
・ターゲットを明確にした場合のキャッチコピーの考え方。キャッチは、バナーでもいいですし、サイトでも使えます。ポートフォリオの見出しも相手に刺さるコピーとかあってもいいかも。

売れてるお店はやっている バナー制作のテクニック
・【簡単】ネットショップのデザイナーならではのテクニックです。ちょっとした工夫でバナーがキラッと目立ちます。

GoogleのURL短縮サービスが終了。代わりとなるサービスはどれ? | ナビプラス(NaviPlus)
・終了するのはショックです。転職活動中に制作実績のURLを短縮して面接前にどれをクリックしているか確認してたのを思い出します。

デザインの基本★文字詰め(カーニング)のコツをつかもう | WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”
・【再勉強】のつもりでカーニングを見直してます。基本操作はaltと←→ですが、adobe全般で文字詰めや配置調整はshiftを加えて効率化できます。

簡単に心を掴むキャッチコピーを作るための3つの型。 そして「広告としてのキャッチコピーの役割」とは?
・普段レスポンス重視で制作してると、この記事のように【そもそもコピーって何?】に共感してしまうのではないでしょうか。

文字デザインを良く見せるための10のヒント:カーニングを使いこなす via
・【玄人志向】カーニングを極めた記事です。自動調整を使わないという鬼軍曹並みの教えが必見です!

神は細部に宿る!文字組みの基礎ルールは覚えておこう|ferret [フェレット]
・【良質です】この文字組み記事もわかりやすいです。テクニックというよりデザインのルールとして読むのが良いと思います。

【Webデザイナーを目指す人へ!】何故バナートレースがデザインスキル上達に最適なのか?
・バナートレースのツイートをよく見かけるので、自分の勉強メモをまとめてみました。独学デザイナーなのでセオリーと違うかもですがw、習熟の手助けになれば嬉しいです。

バナーをデザインする際のヒントやアイディア | ポケットラボ
・グリッド構成に特化した記事だとおもいます。特にカラバリを大量に用意するファション系バナーデザインと相性が良さそうです。

【バナー製作の参考に!】意外と悩む、728×90の横長バナーのレイアウトデザインまとめ – NAVER まとめ
・【曲者】縮小すると商品が小さく見えない。端的な訴求ができない説明調のキャッチだと地味。とにかくクセが強いこのサイズを極めるとバナー構成も明るくなります。

バナーのデザインで悩んだ時に参考にしたい5つのパターン | ベーシックデザイン部ブログ
・どこかの新卒の人が作ったバナーデザイン記事。マージンや文字詰めを意識しすぎてる感はありますが、シンプルなデザインを揃えた内容で、デザイン構成を確認するには良いかと思います。

新人必見!倍速かつ高品質なバナーを作るためのコツを全公開します
・バナー内の要素をグルーピングする方法は他記事にないノウハウ。自然に身につく事かもしれないけどアウトプットしてるのが凄いと思う。

制作現場で使えるバナー制作のワークフロー
・意味があるデザインはこの記事の2番目、下準備を積み上げれば深みが増すと思う。形ある物は意味があります。あと、王大人ネタは個人的にツボ。

【実例】バナーデザインのレベルをぐいっと引き上げる3つのコツ!
・上達のコツはヒアリング8割と強く訴えている記事で、3つ目の項目がキーなのではと思います。デザインの目的をしっかり残せるヒアリング内容です。

Webデザインのポートフォリオのアウトプット

ポートフォリオの基本 – 最低限押さえておくべき職種ごとの作成ポイント | マイナビクリエイター
・実は担当者にイメージしてもらうポイントが各ポジションとも同じ。記事では、3つに絞って説明してます。それをポートフォリオに落とし込むといいかも。

後編【Webデザイナーを目指す人へ!】何故バナートレースでデザインスキルを身につけるのか?
・バナートレースの上達方法を作業工程ごとに記事にまとめました。トレースの最初は補助を付けながらやった方が配置やマージン、文字調整など理解しやすいです。

簡単に採用されるポートフォリオの作り方!意識すべきたった一つの事
・【お宝記事!】採用担当者側が書いた記事なのでポートフォリオを見たときの心理状況をリアルに伝えています。たしかにポートフォリオがキラッとなるイメージが湧きました!

【改訂版】就活用WEBデザイナー用紙ポートフォリオの作り方
・なるほど。ブラッシュアップは良い手ですね。中途採用だと成果物を触るのはおかしいけど、就活の学生さんならではの発想!勉強になりました。

最強ポートフォリオの簡単な作り方 | 未経験からWebデザイナーへ!【2018年版】
・【ご参考に】実績を水増ししようって!「あ、そういうことね。」自分で作品を作る事はやっぱり大切だと読んでみて実感しました。

転職に有利なポートフォリオの作り方と制作フロー – クリエイターのための総合情報サイト CREATIVE VILLAGE
・【未経験の人】でもやっぱりデザインスキルの確認は必要。架空サービスや選考企業に似合うデザインを作っておくのがポイントだそうです。

宝島社の「上から12cmの法則」 雑誌リンネルの「ル」が隠れてる理由 – withnews(ウィズニュース)
・そうなんだ。上から12cm。デザインの理解できました。

Webデザイナーのポートフォリオの作り方|未経験からWebデザイナーになろう!
・グラデーションの記事書きました。ベテランさんは知っていて当然ですが、駆け出しの時、みんなやってしまってたのでは?たった1つだけ気をつければグラデは変わります!

デザイナー志望者は必見! 採用されるポートフォリオを作る「た行」の法則 – イーアイデムの地元メディア「ジモコロ」
・【単】に面接をするだけでなく、【違】いの分かるポートフォリオを【作】るにはどうするかを【丁】寧に紹介した【と】んでもない記事です。

そのポートフォリオは、もしかしたらあなたを〇〇なデザイナーに見せているかもしれない
・【事例付き!】裏を返せば、面接担当はあなたのポートフォリオを見てスキルの勘違いをしてるかも?という他人事ではない記事です。

新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方|Webクリエイターボックス
・【近道!】どのCSSがいけない事してるのかを見る方法がわかる記事。CSSで沼に落ちいったらF12を押して使おう!特に他人のソースコードで!

知っておくとかなり便利!Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
・【覚える】にはコリスさんの記事がおススメ。まだ使えてない機能ばかりだけど、詳しく紹介しています!便利そうなのでマスターしていきたいです!

Chromeデベロッパーツールの使い方
・【Webマスター向け】htmlとcssの操作方法をかなり丁寧に解説してる記事です。修正案件をメインにコーディングしてる方は特におすすめ。Webデザイン始めたての人も、修正の沼に沈みにくくなるので使い方を身につけておくと良いですよ。

chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法 | ぶちねこどっとうぇぶ
・【私の恥ずかしいお話】このやり方は知らなかった。ローカルに保存出来る!F5で元に戻っても安心!さらにローカルに保存する時の管理ルールを用意すればOK!

Chromeのデベロッパーツールでサイトの表示速度を計測
・【お宝記事!】表示速度早くしてよ!画像軽くすればいいじゃん!根拠なく言われた事ないですか?ある人は知っておいて損は無い記事!画像軽量化の優先度は高くなくて、なにより優先すべき問題の根源は〇〇タグです!

主にCSSのアウトプット

HTML/CSSの落とし穴!?初心者向け覚えておきたい基本ルール5つ – Noise of Web Programming
・CSS優先順位のおさらい記事です。簡単な内容ですが、資格試験とかで似た問題が出題された記憶があります。知ってるつもりにならず、おさらいのつもりで読んでみましょう。

HTML/CSSの落とし穴 ~知らないと15分損するTips集
・【豆知識】なんでもできそうなCSSだけど、この記事ではあえてできない事にフォーカスして紹介しています。「あれ?動かない!」は実は「仕様」なのかもしれません!

意外な落とし穴!?CSSコーディングにおける iPhone での注意点・3つの事例 | SiTest (サイテスト) ブログ
・【参考に】CSSとスマホの仕様を知らないでデザインすると後で深い沼に入り大変という事をあらためて再認識しました。

Vue.jsでドラクエ風のポートフォリオを作った話
・ドラクエ風ポートフォリオの記事 (´,,•ω•,,`)実力見せるには良い企画かもしれませんね。でも、html、css、jsで似た事は出来そうだけど実装するには難易度高いか。

[CSS] 子要素の上下marginが効かなかったり親要素marginに影響するのは困るので、阻止する。
・子要素の幅がでかすぎて親要素の幅が効かない時の対処法 (´,,•ω•,,`)CSS描き慣れない時はそく遭遇するヤツなのでチェックして見ましょう (´,,•ω•,,`)

Webデザイン勉強法や上達法のアウトプット

実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 – IT系女子ログ
・【おすすめ!】デザイナーとしての覚悟とか自責とかある程度自分を追い込む時期は必要。折れない心はそうしないと身に付かない。

実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 – IT系女子ログ
・【お宝記事!】デザイン編とコーディング編を1本にまとめたボリューム満点の記事 (´,,•ω•,,`)これ、全部やりこんだらデザイン力はかなり上がりますね(´,,•ω•,,`)

教えて先輩!「誰もがぶつかるデザインの壁」の乗り越え方! | WebNAUT
・【お宝記事!】デザイン上達の壁をどう乗り越えたかを深掘りしている記事。やはり質と数をこなすだそうです。指導法もあり【自分で解決に至る瞬間を与える】が良いとの事。考える力が必要なのですね。

独学WEBデザイナーの私が考えるデザインの上達方法
・【Webデザイン始めたての人】に気付いて欲しい事を書いてる記事です。説明文のボールド文字だけでもデザイン力の上達に繋がる事を書いてるので読み込んで欲しいと思いました!

Webデザインあるあるのアウトプット

【必ず通る道】駆け出しWebデザイナーのあるある10選
・【未来の話】Webデザイナーを目指す人にこれから起こる事をまとめた記事です。読むと落ち込むだり悩んだりするかもしれませんが、先輩たちも全員やらかした事。大丈夫だよ!みんな全て乗り越える(´,,•ω•,,`)

以上です!がんばってコピペしまくった〜!

ということで、来年よろしくおねがいいたします!

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【新企画】Webデザインとフォトショップのクイズをはじめます!

2019.01.05

【第1回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.15

CVエリアデザインのポイント。改善できればランディンページ(LP)は強くなる。

2018.05.27

【簡単!】気持ちのよい文字組み(カーニング)をマスターしてWebデザインスキルを磨こう!

2018.11.24

そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう

2017.11.12


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google