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




中の人
こんにちは。
実は自分のツイートが拡散されて、ちょっとブルッちまったcoffeebreakの中の人です。

この記事は未経験の人や新米Webデザイナーさん向けに、デザインノウハウの記事を探しtwitterで共有。後日ブログで定期的にまとめるというtwitterのつぶやきを二次的に活用したちょっとせこいコーナーです。一応過去に試した事があるもの、経験になったノウハウを中心に共有しているのでアウトプットという形にしています。

今回で第8回目のアウトプットです。もうすぐ3ヶ月目に突入ですね!
なんだかんだで、デザインノウハウは探せば見つかる物ですね!

今回は技術的な情報としてディベロッパーツールを中心にツイートしていました。ディベロッパーツールってhtmlやCSSの間違い探しに役立つのです!だから実務でもある程度活用できるような内容を探してツイートしてみました。

中には数千文字の大盛り記事も登場します!
さっそく確認していきましょう!

前回の記事はこちら
第7回twitterアウトプット記事

中の人
いろんな記事をみたのと、私の経験からピックアップした記事をツイートしたよ。

フォロワーが良いと評価したデザインノウハウの紹介

最初の記事
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方|サルワカ

概要
ツイートには私の見出しも加えてみました。

<ツイート見出し>
【基本】コード修正がうまくいかない時は、こいつを友達にするといいです。F12で何度も解決してきました。

<コメント>
でました!とっても詳しいサルワカさんの記事!個人的にはコーディングの情報は詳しすぎて最高ですね。
どのように詳しすぎかというと、このアウトプットした記事はなんと5000文字の情報量!
htmlとCSSの使い方だけで5000文字つかってます!ディベロッパーツールをまだ使っていない、ちょっと苦手という人はサルワカさんの記事を読んで勉強してみましょう!

次の記事
【後編】photoshopで作る金色のツボとコツ!未経験でもワンランク上のWebデザイナーなろう!

概要
ツイートには私の見出しも加えてみました。

<ツイート見出し>
【フォトショップ始めたての人へ!】私なりの金色グラデーションの作り方を記事にしました。16進数のコピペ、記事内デモ画像のPSDファイルもゲットできますよ!

<コメント>
私の記事にたくさんのいいねとリツイートが!みなさん読んでいただきありがとうございます!
グラデーションの中でも金色って難しいのです。デザインテイストによって色とトーンをしっかり変化させないと、すっごいもっさいデザインになるのですよ!
私の記事では、グラデの色幅をおさえた汎用性がそこそこ高いものを紹介しています。あと、PSDデータと16進数をコピペできるようにしてるので、ほぼ丸コピで活用できますよ!

評価されたデザインノウハウについて

知りたい情報をより詳しく紹介した記事に多くのいいねやリツイートを頂くようになりました。
フォロワーさんの特徴や知りたいニーズをしっかりくみ取ってツイートを繰り返せば、少ない投稿でも効果はあります!
因に、サルワカさんの記事は5000文字で、私のが2800文字です。2000文字から3000文字程度で作り込んだ記事をどんどん公開したいものです。

同じ期間中にツイートした残りのデザインノウハウ記事の紹介

ご自身にプラスになりそうな記事があれば覗いてみてください。
皆さんの技術向上につながればと思います。
※ナカグロは私のツイート見出しです

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

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

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

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

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

残りのデザインノウハウ記事について

今週はちょっと路線変更して、技術的なツールのツイートをやっていました。htmlやcssに関連性が高いディベロッパーツールを紹介していきましたが、全然人気がなかったです!やはり「デザインを上達したい」と思っているフォロワーさんがたくさんいらっしゃるので、ちょっとニーズが違ったのだと思います。

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

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

2018.11.24

化粧品・コスメで訴求がしっかりしているランディングページ(LP)のデザイン6選

2018.01.28

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

2018.10.15

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

2018.11.13

【Webデザイン上達のコツ5選】普段の生活の中で、デザイン力を身につける方法!

2018.11.23


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

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



スポンサード広告 by google