38
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

webデザインするときに便利なツールとかサイトとか

Last updated at Posted at 2018-03-21

自分用メモ

#開発お助けツール

お気に入りだからあんまり教えたくないけど、すごくいいやつたち。
使ったことないのもあるけど。

##いちいちHTMLタグ打つの面倒だわ
神的存在。すごい。らく。最高。これ使いこなせればHTMLマスターしたと言ってもいいと思う。
div>dl>(dt+dd)*2と入力すると、

<div>
 <dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
 </dl>
</div>

が生成されます。もちろん、生成前にクラス名を書けば、クラスも同時に生成されます。
は〜〜〜〜最高。

##ブラウザ別CSS対応非対応を確認したいけどググるのは面倒だぁ
CSSのプロパティを入力するだけで、どのブラウザが対応していてどのブラウザが対応していないのかがすぐに分かります!
プロパティごとに対応非対応をググる必要なし!
https://caniuse.com/

##この色いい!使いたい!
「スポイトツール」「カラーピッカー」でググってお好きなものをインストールしてください。
ブラウザ拡張系だと便利です。

##配色センスがないよぉ
そんなあなたに天下のAdobeが手を差し伸べています。
強く握り返しましょう。
メインカラーを選ぶだけで、補色や同系色など組み合わせを提示してきます。
https://color.adobe.com/ja/create/color-wheel/
あとはいい感じの配色がある色見本サイトやら書籍やらを見ればいい。

##いい感じのサイト真似していい感じに画面設計工程をラクしたいなぁ
パーツごとでいい感じが見たいとき
http://calltoidea.com/
http://collectui.com/

サイト全体でいい感じが見たいとき
http://www.gdweb.co.kr/
https://www.ikesai.com/

##アイコンを画像ファイルにしたくないんだよねぇ
そんなときはフォントを使いましょう。
アイコンフォントすごいです。
https://fontawesome.com/
http://materializecss.com/icons.html
https://zurb.com/playground/foundation-icon-fonts-3
http://linea.io/
http://themes-pixeden.com/font-demos/7-stroke/
http://evil-icons.io/
https://www.webhostinghub.com/glyphs/
自分好みのものを探してみてください。

##オシャレな英字のwebフォントを使いたいなぁ
ちなみにGoogleだと日本語も用意されてます。
https://fonts.google.com/
DLして使う系だともっと選択肢はあります。

##このフォント好きぃ!使いたいなぁ!
Adobeの女神が微笑んでいる!
スマホアプリですが、気になるフォントにカメラをかざすだけで、
同じようなフォントを教えてくれます。
https://www.adobe.com/jp/products/capture.html

##写真や画像を使って視覚的インパクトを強くしたいなぁ
フリー素材を使うとインパクト出ます。
https://pixabay.com/
http://alana.io/
http://stokpic.com/
https://stocksnap.io/
https://unsplash.com/

##スクショだと上から下まで画像として保存できない……
ブラウザの拡張機能だと、ページ全体のスクショが可能です。
探してみてください。

##ちゃちゃっと画像編集したいな
ソフトインストールするほどでもないけど、画像編集したい時には、webアプリがよい。
https://vectr.com/
https://pixlr.com/

##デザインツール欲しいなぁ
https://www.sketchapp.com/
https://studio.design/ja
https://www.figma.com/
https://www.adobe.com/jp/products/xd.html

##そういう情報系欲しいわぁ
WEB屋発信の情報がほしいなら
https://liginc.co.jp/
Qiitaも豊富
https://qiita.com/trend
あとは都度都度ググる。
ググりポイントは[webフォント まとめ]で検索するとまとめサイトがヒットするので、同じようなものが複数サービスで見つけられます。
自分好みのものが見つかりやすくなります。
あとは最近の情報だけに絞るとか。
あとはSNSでデザイナー系をフォローしまくる。
欲しい情報持っていそうな人を見つけてたかる。
あとは、このサイトおしゃれー!真似したーい!と思ったらソースコード読むとか。

UI/UXに特化した情報がほしいなら
http://uxmilk.jp/
デザイナー発信の情報がほしいなら
https://note.mu/notemag/m/m57787022cedc
最近のおすすめはnoteです。デザイナーさんがたくさん発信してます。
最近コードの入力に対応されたので、ソースコード売れます。

38
67
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?