Edited at

とにかくカッコいいWebデザインを簡単に作るためのTipsとアイデア集

More than 1 year has passed since last update.


アイデアやテクニック集

かっこよく、見やすく、それでいて簡単に!

気が向いた時にゆっくり目を通しておくと、デザイン考える時に便利ですね。


テクニック集

まずはこんな事できるっていうのを頭に入れておくとよいかと。

事例から学ぶ!Webアニメーションのテクニックまとめ

これぞプロのデザインテクニック!UIデザインの印象がよくなるデザインの知識とテクニックのまとめ

最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger

Webサイトを使いやすく!UIデザインのCSS小技テクニック21個まとめ(実例サンプルコード付)


カッコいいサイト集

細かいパーツがわかったら、完成品を見るのが良いですね。

アニメーションのきれいなWebサイト10選

2017 Webデザイン・UIトレンド10選

UI/UXが優れている!2016年オススメのWebサイト・アプリ9選


実装する時のTips集

ライブラリを使えるならその方が早いし、なければサンプルコードを組み合わせたりして作る感じがいいですね。


ライブラリ等


まとめ系

ウェブデザイナーが試したい、Webアニメーション無料プラグイン&ライブラリ75個まとめ【保存版】

CSSアニメーションを簡単に実装できるライブラリ 10+


個別で気になるライブラリ

Bootstrap

レスポンシブデザインが簡単にできる、Githubで2番めに人気らしいフレームワーク。NASAも使ってるそうな。

Bootstrap4がなかなかいいらしい。-> Bootstrap 4が全然盛り上がってないから試した → 思ったより良かった

Bootstrap-Vue

モダンな環境でやるなら、これも良さそう。コンポーネント指向を理解して、Bootstrapのクラスとか書くのが面倒な人向け?

Materialize

マテリアルデザイン。まだベータらしい。

anime.js

割りと有名?CSSライクでデザイナでも扱いやすいそうな。

Animate.css

ちょっとした動きを付けるのに。軽そう?

SPIRIT

まだ非公開ベータ版らしい。公式ページのサンプルは可愛くてワクワクします。


CSSだけで実装するパターン

CSSだけで動かしたり見た目を良くするパターンです。

本当に思った動きがしたいなら、自分でコーディングするっきゃないですね。

ここまで動かせる!楽しいcss アニメーションのサンプル集

【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選

CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ

使える!CSSアニメーション 20選

CSS Filtersはアニメーションで使うのがお勧め!


WordPressなら

最近自分が使ってるテーマとプラグインはこれ。

Simplicity

たくさんのことが設定画面でできちゃう多機能型の国産無料テーマ。

奥さん、ついでに流行りのAMP対応もできちゃいます。

ただし、手動でインストールする必要がある!…と言ってもZipを落として自分のサイトでインポートするだけ。

Page Builder by SiteOrigin

見やすくてかっこよくてレスポンシブな固定ページが、UI操作で簡単に作れるプラグイン


おわり

新しいのが見つかったら、時々更新していきます。