97
157

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 1 year has passed since last update.

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

Last updated at Posted at 2018-03-15

アイデアやテクニック集

かっこよく、見やすく、それでいて簡単に!
気が向いた時にゆっくり目を通しておくと、デザイン考える時に便利ですね。

テクニック集

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

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

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

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

カッコいいサイト集

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

アニメーションのきれいな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操作で簡単に作れるプラグイン
→ 最近のワードプレスはブロックエディタになったので、不要かと。

Roots
デザイン部分ではなく、技術的な部分ですが、
モダンな技術でWordpressを開発したいなら、こちら。
テーマ開発にYarnやらLaravel Mixが使えて、ワン・コマンドでローカルサーバーやらHMRやら色々準備してくれます。

おわり

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

97
157
3

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
97
157

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?