Read Article
アイソメトリックなイラストを採用しているwebデザインのショーケース
斜め上から見ている感じで描かれたIsometric（アイソメトリック）なデザインイラストを採用しているwebデザインのまとめです。いずれも基本的にはファーストビューで採用しているものになりますが、サイトによっては全体的にこのテイストを用いたイラストを採用していたり、ただイラストを配置するだけでなくアニメーションをつけたりナビゲーションの役割を持たしているところもあります。要素や色の組み合わせ方、角…
Tag : web Design
- 71 Articles -
Read Article
追従ヘッダー実装時に使える動作・デザインパターン例
常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。
Read Article
ECサイトやプロダクト紹介サイトで、商品イメージを配置する際に覚えておきたい見せ方のパターンや機能
特にECサイトで売上に影響してくるポイントのひとつである、商品イメージを配置する際に覚えておきたい見せ方のパターンやユーザーにイメージを通してより情報を伝えるのに役立つと思う機能をいくつか紹介します。また、紹介するものによっては見た目だけでなく、実店舗とは違って実際にユーザーが商品を手にとることができないことから生じるオンラインストア特有の問題などを予め防ぐことにも繋がってくると思います。
Read Article
スプリットスクリーンレイアウトを採用しているwebデザインのショーケース
画面を大胆に分割することでそれぞれのコンテンツを引き立たせるスプリットスクリーンレイアウト（分割画面レイアウト）を採用しているwebデザインのまとめです。同レベルのコンテンツを並べる、対比をより効果的に見せる、イメージとテキストをはっきりわける、半分を背景のように見せる、スクロール時に半分だけアニメーションを加えるなど、紹介するサイトにもあるように様々な見せ方が可能です。
Read Article
最近気になったハイクオリティなUIキット #19
ここ最近気になったUIキットのまとめです。見た目や各パーツ・カラーの組み合わせ方などデザインの参考にするだけでなく、それぞれ実際に作成されたファイルをダウンロードすることもできるので、どのようなレイヤースタイルで作られているかを参考にしたり、ライセンスが問題なければデザインで利用させてもらうこともできます。今回はフルバージョン（有償）の場合であればより豊富なデザインが利用できるものが多めです。
Read Article
最近気になったハイクオリティなUIキット #18
ここ最近気になったUIキットのまとめです。見た目や各パーツ・カラーの組み合わせ方などデザインの参考にするだけでなく、それぞれ実際に作成されたファイルをダウンロードすることもできるので、どのようなレイヤースタイルで作られているかを参考にしたり、ライセンスが問題なければデザインで利用させてもらうこともできます。今回はよくあるWebデザインやアプリ用のものだけでなく、Bootstrap 4のUIを再現し…
Read Article
多数のHTMLテンプレートやWordPressテーマを集めた「Best of Themes」
自分はこういったテンプレートを利用する機会が少ないのですが、普段から多様している人には便利そうなサイトだったのでご紹介。「Best of Themes」は、様々なところで配布されているHTMLテンプレートやWordPressテーマなどをまとめているサイトで、他にもEメールやDrupalで使えるテンプレートやテーマなどもあります。
Read Article
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20
WebサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。また、悩んだ・困ったときに見るだけで…
Read Article
様々な料金ページデザインを集めたデザインギャラリー「Pricing Pages」
「Pricing Pages」はその名の通り料金ページデザインのみを集めたデザインギャラリーです。海外サイトのデザインのみという点やサムネイルが若干小さめというのがありますが、全体的な配置や配色をはじめ、目立たせたい部分をどのように表現しているかなど参考になりそうなデザインが多くあります。
Read Article
デザインやレイアウトの参考になる、管理画面・ダッシュボードのデザインショーケース #3
DribbbleやBehanceで見かけた管理画面・ダッシュボードデザインのまとめです。管理画面・ダッシュボードは見易さや操作性の高さが特に重要だとは思いますが、デザインにもこだわりたいとか表だけでなくこういった裏側もオリジナルにしたいという場合に、各要素の配置・見せ方・配色などいろいろと参考になります。
Read Article
最近気になったハイクオリティなUIキット #17
ここ最近気になったUIキットのまとめです。見た目や各パーツ・カラーの組み合わせ方などデザインの参考にするだけでなく、それぞれ実際に作成されたファイルをダウンロードすることもできるので、どのようなレイヤースタイルで作られているかを参考にしたり、ライセンスが問題なければデザインで利用させてもらうこともできます。今回はアプリやモバイル系のもの中心で、他にはダッシュボードデザインやシンプルなワイヤーフレー…
Read Article
サイトのフローチャート・サイトマップ作成時に便利な大容量デザインキット「Wyre」
久しぶりに即ダウンロードさせてもらった素材があったのでご紹介。「Wyre」はフローチャート・サイトマップ作成時に便利なデザインキットで、サイトで多用されるレイアウトやコンポーネントが100種類以上用意されています。ベースとなるフレームやアロー・バッジといったアイテムも用意されているので、それらを組み合わせることで簡単にフローチャート・サイトマップを作成することができます。