Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
156
Help us understand the problem. What is going on with this article?
@blue-ossan

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

アイデアやテクニック集

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

テクニック集

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

事例から学ぶ!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操作で簡単に作れるプラグイン
→ 最近のワードプレスはブロックエディタになったので、不要かと。

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

おわり

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

156
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
blue-ossan
嫁さん一番、仕事は二番、三児のオヤジ。 LaravelとVueがお気に入り。 2004.4- 高校でプログラミングを学ぶ 2007.4- SES就職 2012.12.3- 結婚 2013.5- フリーランス

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
156
Help us understand the problem. What is going on with this article?