【厳選100記事】アウトプット!未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをまとめました。2017年11月CLOSEキーワードで記事を検索CLOSEHOMEアウトプット【厳選100記事】アウトプット!未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをまとめました。wpmaster【厳選100記事】アウトプット!未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをまとめました。ツイートシェアはてブGoogle+Pocket中の人こんにちは。いつも他人の記事ばかりツイートしているcoffeebreakの中の人です。この記事は未経験の人や新米Webデザイナーさん、会社の情報共有がめんどくさい人、アウトプットが本当にめんどうな人向けに、私がデザインノウハウの記事を探してtwitterでツイートしています。今回は年末SP!見出しの通り、100記事全部紹介しちゃいます!このアウトプット記事は14,000字の大作なので全ての記事を確認するのは大変だと思います。読むのがしんどくなったら速攻で離脱するのをおすすめ致します。最新のアウトプット記事だけでいいやという人は前回のアウトプット記事だけご確認いただければ幸いです。厳選記事その1広告用バナー、こうやって考えてつくってリサイズしてます(実演付)概要フォトショップの画面をキャプチャしてバナーリサイズ方法を公開した記事。リサイズは素材の拡大縮小を行うのでスマートオブジェクトを推奨しています。スマートオブジェクトに変換する事で素材の画質が維持できるのでリサイズには最適ですよね。厳選記事その2バナーを短時間で効率よく量産する時のポイント概要バナー制作フローをテキスト文字段階から完成まで丁寧に紹介しています。効率化を計るためのテンプレートの紹介や、見栄えを良くするためのモノクロで視認性を確認するといったすぐにでも活用できるノウハウを紹介しています。概要デザインはできるけど、引きが弱いと感じたらコレを読むといいかも。<コメント>有名な広告会社の記事です。ジャンル別に必要な鉄板素材とキャッチの組み合わせを惜しみなく紹介しているので、今でも参考になります。!】先輩デザイナーからデザイン解説があるので読むだけでノウハウが身につく記事です。トレース60本までは掲載されていて100本までが楽しみです。<コメント>バナートレース100本目指して連載中の記事のようです。先輩デザイナーとの会話調のやり取りが分かりやすくで思わず読んでしまいます。100本のトレースはキツいですね。バナー構成の数々です。後はデザインで雰囲気を変えれば複数種類制作可能ですね。<コメント>リスクルさんの記事です。バナー構成を検証して、獲得できるものばかりをひたすら集めた記事です。【簡単】バナー制作の時短テク満載!広告クリエイティブはスピード勝負だから必須スキルですね。<コメント>こちらもリスクルさんの記事です。バナーを時短で作るには、全てオリジナルデザインではなく、組み立てやすい構造と置き換えやすいデザインパターンなら程度の短時間で出来上がってきます。ネット広告のバナーは大量に用意していくので、現場ではは1本15分くらいで作っていると思います。「野暮ったいんだよ」下町ロケットでも使われたセリフ。このデザインチート記事を読んだらその意味がしっくりきた。<コメント>どことなく、プロモーションとか知っていて記事じたいにクリエイティブというか精通したものがあるなと感じていたらドワンゴさんの記事でした!なんでもかんでも積み込んで「野暮ったさ」が全面にだしてしまうクリエティブもありますが、ブラッシュアップして仕上げていこうねというお話。あと、下町ロケットのドラマで同じフレーズがあったのでちょっと便乗しました。こんな見出しの書き方もアリかもしれないです。厳選記事その8ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめ概要オプティカルとメトリクスについて。肌感ですがwinのオプティカルでトラッキング75pxがiphoneのデフォルトの文字間に近いです。<コメント>カーニングとは何?を詳しく書いている記事。他のカーニング記事は独特なスキルを紹介したものが多かったですが、この記事はオーソドックスで分かりやすいないようでした。再ヒアリングの理由や提供素材についてとか、現場起こる「あるある」をバナー完成までレビューしています。fixはどんな仕上がりなのか?<コメント>ドワンゴさんの記事はいつも人気がありますね。記事の中身ですが二コ動のキャンペーンバナー制作を現場デザイナー目線でレビューしたもので、このように現場の生の成果物をリアルに伝えている事がWebデザイナーを目指す人にとって貴重な情報なのではと考えています。実際私も実務以外の情報として他企業の現場記事は新鮮に感じたものです。位置関係で印象が変わる記事。印象は体験できるけど、なかなか母数の大きい言葉でまとめるのは難しいのがデザインです。<コメント>画像のトリミングとキャッチの配置しだいで受け取り側の印象が変わってくるよという内容を解説した記事です。バナーデザインで画像トリミングの技術情報を詳しく紹介した記事は見当たらなかったので、私も「勉強になるな」と思いました。【お宝記事!】未経験だから用意できるポートフォリオの強みを深掘りした記事です。作品作りは強力な武器になります!<コメント>私がこの記事を紹介した理由は、具体的に未経験でも作品作りをして中身を充実させる手段を豊富に紹介してるからです。自分で作る友人の依頼で作る行きつけのお店に営業するこれらは私も転職活動中におこなった手段の一つでした。少ない経験の中で、大勢の応募の中で、どのように目立てば書類選考を通過、面接で話を聞いてもらえるか頭をひねったものです。厳選記事その12【学生Webデザイナー】ポートフォリオの作り方をご紹介|JobQ[ジョブキュー]概要ブラッシュアップは大切とある。後は【架空サイトデザイン】を用意する事。私が転職活動中にやった方法と同じで嬉しい!面接ではデザインの設計力まで深掘りした質問があるのでその対応も必須です!<コメント>この記事は、学生目線で書かれたもです。学生のポートフォリオならではのノウハウが紹介されています。ブラッシュアップが可能というのは驚きでした。課題の延長で自分の作品を面接向けにブラッシュアップできるのは学生ならではの特権ですね。実績を載せる方法として、1架空サイトや2友達のサイトをつくる、3営業活動など具体項目を紹介してる記事。2はヒアリングから体験でき納品までの苦労分かるから、一度はトライしても良いかも。<コメント>ポートフォリオのテンプレが豊富で、作品の作り方のアイデアをいくつか紹介している記事です。実践できそうなアイデアも書いてあります。1架空サイト2友達のサイトをつくる3営業活動など先週ご紹介したポートフォリオ記事と同様のアイデアと、クラウドソーシングの活用をすすめています。クラウドソーシングはちょっとハードル高いかなと思ったのですが、コンペを活用するのですね。けのポートフォリオなの?この考え方はプレゼンや資料作りで大切なノウハウの1つですね。<コメント>この記事はポートフォリオの作り方を説明ではなくて、やってはいけないポートフォリオの例を上げて、駄目な事を紹介しています。個人的に良かったなと感じたのは「だれの為のポートフォリオ」で「だれ向けのポートフォリオ」なのかという事です。【基本】コード修正がうまくいかない時は、こいつを友達にするといいです。F12で何度も解決してきました。<コメント>でました!とっても詳しいサルワカさんの記事!個人的にはコーディングの情報は詳しすぎて最高ですね。【フォトショップ始めたての人へ!】私なりの金色グラデーションの作り方を記事にしました。16進数のコピペ、記事内デモ画像のPSDファイルもゲットできますよ!<コメント>私の記事にたくさんのいいねとリツイートが!みなさん読んでいただきありがとうございます!グラデーションの中でも金色って難しいのです。デザインテイストによって色とトーンをしっかり変化させないと、すっごいもっさいデザインになるのですよ!私の記事では、グラデの色幅をおさえた汎用性がそこそこ高いものを紹介しています。́,,•ω•,,`)<コメント>記事主さんの文章量が半端ないよね〜。あと見出しが多い!という事はそれだけご自身が試したお題があって、それが有益だったという事ですよね。中にはちょっとした合間でもできそうな項目もあるので、できる事が真似してみるのもいいのかなと思います。この記事を振り返ってみたけど、各項目を1週間実践して「◯◯を試して気づいた事」でデザイン記事が書けるなぁ。概要ドロップシャドウの記事を書きました。濃い薄いシャープな影とか色々用意したので影の作り方が「苦手だな」と思う人は是非真似してください!あとPSDのDLできます!<コメント>あ、自分の記事ですね。twitterに投稿しているデザインをみていたら、どうもフォトショップの効果を駆使してないよな〜と気づいたので、熱が冷めないうちにドロップシャドウの記事を書きました。すっごい基本的な表現ですが、これだけ覚えると結構活用できるのです。これからWebデザイナーを目指す人、目指している人、まだまだ新米の人はぜひ身につけていただきたいと思います。厳選記事その19【簡単!】気持ちのよい文字組み(カーニング)をマスターしてWebデザインスキルを磨こう!概要Webデザイン初心者向けに【文字組みは難しくないよ】という記事を書きました。文字組みの自動処理と程よい距離感覚を身につけてキレイで整頓したキャッチを作ってみましょう!<コメント>フォロワーさんの作品をみてると、まだ文字組みが詰め切れてないよな〜と思ってました。単純にフォロワーさんが悩んでいる記事を書いたのですが、この文字組み記事はいいね155件もいただき評判よかったです!リツイート27件と評判も上々だったので、どうして人気がでたのか記事にしてみました何故?発信力の無いWebデザイナーのツイートがひとり歩きしてフォロワーが増えたのか?いくつかの文字組み方法を紹介したのですが、記事を公開した後もアイデアが浮かんだのでいつか追記しておきたいと思います。厳選記事その20デザイン上達に必要なのは努力じゃない。【なるほど!】目で鍛える。まっすぐな理由で分かりやすいです。́,,•ω•,,`)<コメント>この記事は今までアウトプットしてきた記事の中でもかなりの「お宝記事」です!人が考えている事をくみ取る力はWebデザイナーを何年も続けていると「必要なスキルだ!」と気づくはずです。話を聞いても相手が想像している事を100%共有する事は無理です。出来るだけイコールにする事は可能で、この記事では出来るだけイコールにする簡単な方法を公開しています。・乾燥訴求を調べたら紐付く訴求が見えてきた。up・ダブルサイズから説明してたら親切なのに。おさえておくサイズはまとまってるので便利な記事です。これは便利!スマホ広告のバナーサイズ、表示位置、呼び方まとめ【保存版】ダブルサイズから説明してたら親切なのに。おさえておくサイズはまとまってるので便利な記事です。大量にバナーを作成して見えてきたバナー作成のコツとデザインのポイント。・構成が作れる人と作れない人の違いはこれですね。構成を分解して再構成してるのはデザイン展開に役立つ。クリック率が飛躍的に増加するバナー広告の9つの構成とデザイン・構成が作れる人と作れない人の違いはこれですね。・アラサーとアラフォーの違い。乾燥は気にしてるけど、年齢層が上がればそれ以上に気にする悩みがあるみたい。思わずクリックしたくなるバナー広告をデザインするための14のヒント・11個のヒントが自分でも意識してる事だった。・イケてるファション系バナーのデザイン構成をまとめてる。トップデザイナーが語るクリックされるバナーデザイン。指標ではなく、デザイン理論で効果改善させるクリエイティブを紹介した非常にレアな記事。・何故あのバナーデザインが良くできてるか?それが文字組みノウハウでわかる記事。新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ・バナーデザインのノウハウがある人とない人の違いがわかる記事。・【量産向けノウハウ】バナー構成さえ決まれば、雰囲気の置き換えでデザインがつくれる。・【初心者向け】誘導線を使いこなせば伝わりやすくなります。NxWorld・【情報量が凄い】この記事を一通り学んだら質のいいクリエイティブは作れそう。・何か足りないと思った時におすすめです!文字の視認性からクリエイティブの追い込みまで完結にまとめてる記事。10のコツ・【いいね多数!】デザイナー1年目から凄い人とそうでない人の違いがわかる記事。早く知っておきたかった!ネットショップ内でクリック率を上げるバナーデザインのコツ・ちょっとした工夫でかなりのクリック率に変化してます。Pinto!・【重要かも!】昔似たことをやったけど、作り込みや文字組みの追い込み具合が吸収できました。ノウハウを貯めれるのでデザインを未経験から始める方おすすめです。CTRを上げるバナーデザインのコツ。・【納得】バナーデザインは美しいじゃなく魅力が必要だと思った。要注意!見落としがちなバナーデザインミスチェックリスト・【新米デザイナー向け】受託デザインの基本的なチェックリストがまとまってます。具体的なので先輩デザイナーさんと確認しあいながら質を上げるのに使えそう。人バカやってるなと思ったけどデザイン準備は【超プロ級】の内容でした。デザインソフトが入ってないからパワーポイントだけでバナーをつくってみた!・【必見】馬鹿にして記事を読んだけど、馬鹿にできないやり方でした。インフィードバナーやリタゲのテキストバナーならこれで作れます。クリック率の高いバナー広告に見られるデザインの特徴とは?(求人市場編)・求人系バナークリエイティブを色、画像、テキストの割合を調査しています。知っておくと、ぽいバナーを最初から作れるかもしれません。このデザイン、なんかダメ――その理由は『もっとクイズで学ぶデザイン・レイアウトの基本』が教えます!:MarkeZine(マーケジン)・こういうクイズ形式でバナーの良し悪しを考察している記事がたくさんあれば上達が早いかもしれない。【5選】ダイエット訴求のランディングページ(LP)を調査してデザインを研究してみた・これを読んでも痩せませんが、痩せるデザイン訴求はわかります。迷わない!!クリック率をあげるバナー制作の3原則!|ピクスタアンテナ・有名素材屋さんがおすすめするクリックされやすい色と画像とキャッチの紹介。クリック率を上げるバナーデザイン3つのポイント・さらに3つ目のボタンテキストは、さらにテキストを変えていくとクリックのハードルが変わってきます。デザイン初心者でもできる?プロっぽいバナーのコツ・記事見出しの一つ一つがバナー制作のツボを押さえてます。・クリックしたくなるキャッチコピーに凄くこだわって書いている記事だと思います。・バナー制作の基本のキから、デザイン別、参考サイトまでしっかり網羅してます。クリックされるバナーの色とデザインは?・どの色を使えばデザインされたバナーがクリックされるかを書いた記事。私も色を軸にLPのCTAを調査した事あったので気になってました。【検証】本物のデザイナーだけが知っているCVエリアのボタンは何色がよいか?・昔は緑、今は赤も増えたけど実はデザイン用途に合わせて色を寄せてる印象もある。TAM・デザインセンス、技術力に定評あるTAMさんの記事。基本的な事を書いてますが参考になります。・キャッチコピーを戦略的に考える記事。最後の方の【さらに効果を高めるには】の3選こそプロのノウハウです。[フェレット]・ターゲット人物像に合わせたデザインを考えて9つのメソッドを掛け合わすとバナーがSSキャラ的に進化します。簡単に心を掴むキャッチコピーを作るための3つの型。「広告としてのキャッチコピーの役割」とは?・普段レスポンス重視で制作してると、この記事のように【そもそもコピーって何?】に共感してしまうのではないでしょうか。目的に合わせたバナー広告のコピーを作るための2つのコツ・興味付け、体験型といた軸からもキャッチコピーを提案するとバナーデザインが楽になります。【酵素編】ダイエット訴求のランディングページ(LP)を調査してデザインを3つ選んでみた・LPデザインの記事書きました。今回は酵素ダイエット訴求のデザインです。ネット広告向けの内容なので、通販とか広告デザインの作り方に興味ある方、息抜きのついでにご覧ください。・【よく使う手法】そのキャッチコピーに対してユーザーがどんな心理を抱いてるかを解説。買い手を想像してデザインに落とし込むのが身につくと自分だけのデザインがたくさんできます。・【デザイン力の実感】3つ目のキャッチは大胆にを使いこなせれば、またはダメもとで提案できれば1UPですね。クリエイティブな広告やポスターのデザインから学ぶ!参考にしたい文字レイアウト・フォントを変化させたり、特定のカルチャーに明るいユーザー向けにキャッチを考える事でもアイデアは広がります。具体例5つ・ターゲットを明確にした場合のキャッチコピーの考え方。キャッチは、バナーでもいいですし、サイトでも使えます。ポートフォリオの見出しも相手に刺さるコピーとかあってもいいかも。バナー制作のテクニック・【簡単】ネットショップのデザイナーならではのテクニックです。した工夫でバナーがキラッと目立ちます。GoogleのURL短縮サービスが終了。ナビプラス(NaviPlus)・終了するのはショックです。転職活動中に制作実績のURLを短縮して面接前にどれをクリックしているか確認してたのを思い出します。WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”・【再勉強】のつもりでカーニングを見直してます。基本操作はaltと←→ですが、adobe全般で文字詰めや配置調整はshiftを加えて効率化できます。簡単に心を掴むキャッチコピーを作るための3つの型。「広告としてのキャッチコピーの役割」とは?・普段レスポンス重視で制作してると、この記事のように【そもそもコピーって何?】に共感してしまうのではないでしょうか。via・【玄人志向】カーニングを極めた記事です。[フェレット]・【良質です】この文字組み記事もわかりやすいです。テクニックというよりデザインのルールとして読むのが良いと思います。【Webデザイナーを目指す人へ!】何故バナートレースがデザインスキル上達に最適なのか?・バナートレースのツイートをよく見かけるので、自分の勉強メモをまとめてみました。独学デザイナーなのでセオリーと違うかもですがw、習熟の手助けになれば嬉しいです。ポケットラボ・グリッド構成に特化した記事だとおもいます。カラバリを大量に用意するファション系バナーデザインと相性が良さそうです。まとめ・【曲者】縮小すると商品が小さく見えない。端的な訴求ができない説明調のキャッチだと地味。クセが強いこのサイズを極めるとバナー構成も明るくなります。ベーシックデザイン部ブログ・どこかの新卒の人が作ったバナーデザイン記事。マージンや文字詰めを意識しすぎてる感はありますが、シンプルなデザインを揃えた内容で、デザイン構成を確認するには良いかと思います。新人必見!倍速かつ高品質なバナーを作るためのコツを全公開します・バナー内の要素をグルーピングする方法は他記事にないノウハウ。自然に身につく事かもしれないけどアウトプットしてるのが凄いと思う。・意味があるデザインはこの記事の2番目、下準備を積み上げれば深みが増すと思う。形ある物は意味があります。あと、王大人ネタは個人的にツボ。【実例】バナーデザインのレベルをぐいっと引き上げる3つのコツ!・上達のコツはヒアリング8割と強く訴えている記事で、3つ目の項目がキーなのではと思います。デザインの目的をしっかり残せるヒアリング内容です。・実は担当者にイメージしてもらうポイントが各ポジションとも同じ。記事では、3つに絞って説明してます。それをポートフォリオに落とし込むといいかも。後編【Webデザイナーを目指す人へ!】何故バナートレースでデザインスキルを身につけるのか?・バナートレースの上達方法を作業工程ごとに記事にまとめました。トレースの最初は補助を付けながらやった方が配置やマージン、文字調整など理解しやすいです。・【お宝記事!】採用担当者側が書いた記事なのでポートフォリオを見たときの心理状況をリアルに伝えています。ブラッシュアップは良い手ですね。中途採用だと成果物を触るのはおかしいけど、就活の学生さんならではの発想!勉強になりました。・【ご参考に】実績を水増ししようって!「あ、そういうことね。」自分で作品を作る事はやっぱり大切だと読んでみて実感しました。VILLAGE・【未経験の人】でもやっぱりデザインスキルの確認は必要。架空サービスや選考企業に似合うデザインを作っておくのがポイントだそうです。withnews(ウィズニュース)・そうなんだ。デザインの理解できました。Webデザイナーのポートフォリオの作り方|未経験からWebデザイナーになろう!・グラデーションの記事書きました。・【単】に面接をするだけでなく、【違】いの分かるポートフォリオを【作】るにはどうするかを【丁】寧に紹介した【と】んでもない記事です。そのポートフォリオは、もしかしたらあなたを〇〇なデザイナーに見せているかもしれない・【事例付き!】裏を返せば、面接担当はあなたのポートフォリオを見てスキルの勘違いをしてるかも?という他人事ではない記事です。新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方|Webクリエイターボックス・【近道!】どのCSSがいけない事してるのかを見る方法がわかる記事。CSSで沼に落ちいったらF12を押して使おう!特に他人のソースコードで!知っておくとかなり便利!Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ・【覚える】にはコリスさんの記事がおススメ。・【Webマスター向け】htmlとcssの操作方法をかなり丁寧に解説してる記事です。修正案件をメインにコーディングしてる方は特におすすめ。Webデザイン始めたての人も、修正の沼に沈みにくくなるので使い方を身につけておくと良いですよ。ねこどっとうぇぶ・【私の恥ずかしいお話】このやり方は知らなかった。Programming・CSS優先順位のおさらい記事です。簡単な内容ですが、資格試験とかで似た問題が出題された記憶があります。知ってるつもりにならず、おさらいのつもりで読んでみましょう。・【豆知識】なんでもできそうなCSSだけど、この記事ではあえてできない事にフォーカスして紹介しています。ブログ・【参考に】CSSとスマホの仕様を知らないでデザインすると後で深い沼に入り大変という事をあらためて再認識しました。́,,•ω•,,`)実力見せるには良い企画かもしれませんね。html、css、jsで似た事は出来そうだけど実装するには難易度高いか。子要素の上下marginが効かなかったり親要素marginに影響するのは困るので、阻止する。IT系女子ログ・【おすすめ!】デザイナーとしての覚悟とか自責とかある程度自分を追い込む時期は必要。折れない心はそうしないと身に付かない。WebNAUT・【お宝記事!】デザイン上達の壁をどう乗り越えたかを深掘りしている記事。質と数をこなすだそうです。指導法もあり【自分で解決に至る瞬間を与える】が良いとの事。考える力が必要なのですね。・【Webデザイン始めたての人】に気付いて欲しい事を書いてる記事です。・【未来の話】Webデザイナーを目指す人にこれから起こる事をまとめた記事です。読むと落ち込むだり悩んだりするかもしれませんが、先輩たちも全員やらかした事。́,,•ω•,,`)以上です!がんばってコピペしまくった〜!ということで、来年よろしくおねがいいたします!この記事はここまで!ここからはよく読まれる記事をまとめてご紹介します。本当の実態を知って失敗したWebデザイナーです。2019.01.14良い構成のCVエリアのアイデアをいろいろと考察してみる2017.12.24【検証】本物のデザイナーだけが知っているCVエリアのボタンは何色がよいか?2018.06.03【たった1問】遷移型アンケートページの構成とデザインを調べてみる2018.09.01日本語フリーフォントお探しですか?未経験・新米Webデザイナーさんにおすすめなフォントを選んでみました!2019.02.11そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう2017.11.12記事でもランディングページ(LP)でもないアンケートページの構成・デザインの作り方2018.08.26お気に入りの情報が無かったでしょうか?この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。▼お求めの記事に出会えますように。抜きツールremove.bgはWebデザイン初心者でも使いやすいか?RECOMMENDこちらの記事も人気です。