アイデアやテクニック集
かっこよく、見やすく、それでいて簡単に!
気が向いた時にゆっくり目を通しておくと、デザイン考える時に便利ですね。
テクニック集
まずはこんな事できるっていうのを頭に入れておくとよいかと。
これぞプロのデザインテクニック!UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
カッコいいサイト集
細かいパーツがわかったら、完成品を見るのが良いですね。
UI/UXが優れている!2016年オススメのWebサイト・アプリ9選
実装する時のTips集
ライブラリを使えるならその方が早いし、なければサンプルコードを組み合わせたりして作る感じがいいですね。
ライブラリ等
まとめ系
ウェブデザイナーが試したい、Webアニメーション無料プラグイン&ライブラリ75個まとめ【保存版】
個別で気になるライブラリ
Bootstrap
レスポンシブデザインが簡単にできる、Githubで2番めに人気らしいフレームワーク。NASAも使ってるそうな。
Bootstrap4がなかなかいいらしい。-> Bootstrap 4が全然盛り上がってないから試した → 思ったより良かった
Bootstrap-Vue
モダンな環境でやるなら、これも良さそう。コンポーネント指向を理解して、Bootstrapのクラスとか書くのが面倒な人向け?
Materialize
マテリアルデザイン。まだベータらしい。
anime.js
割りと有名?CSSライクでデザイナでも扱いやすいそうな。
Animate.css
ちょっとした動きを付けるのに。軽そう?
SPIRIT
公式ページのサンプルは可愛くてワクワクします。有償だそう。
CSSだけで実装するパターン
CSSだけで動かしたり見た目を良くするパターンです。
本当に思った動きがしたいなら、自分でコーディングするっきゃないですね。
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ
WordPressなら
最近自分が使ってるテーマとプラグインはこれ。
Simplicity
たくさんのことが設定画面でできちゃう多機能型の国産無料テーマ。
奥さん、ついでに流行りのAMP対応もできちゃいます。
ただし、手動でインストールする必要がある!…と言ってもZipを落として自分のサイトでインポートするだけ。
カスタマイズする場合は、子テーマを作ってカスタマイズすると良いそーです。
Page Builder by SiteOrigin
見やすくてかっこよくてレスポンシブな固定ページが、UI操作で簡単に作れるプラグイン
→ 最近のワードプレスはブロックエディタになったので、不要かと。
Roots
デザイン部分ではなく、技術的な部分ですが、
モダンな技術でWordpressを開発したいなら、こちら。
テーマ開発にYarnやらLaravel Mixが使えて、ワン・コマンドでローカルサーバーやらHMRやら色々準備してくれます。
おわり
新しいのが見つかったら、時々更新していきます。