UIデザインパターンの参考になるサイト10選
同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction
事例から学ぶ、ドロップダウンメニューのUXを向上するためのヒント
JakeはUIデザインやウェブ開発の記事を執筆するライターです。彼の仕事はあらゆるウェブや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 ドロップダウンメニューは、近年のJavaScriptとCSS3のおかげでずいぶんと発展してきました。しかし、すべてのドロップダウンメニューが同じように制作されているわけではなく、その機能性にはばらつきがあります。 この記事では、使いやすいドロップダウンのナビゲーションメニューを作るための手段をいくつか紹介します。また、基本的には同じデザイン原則に則っているマルチドロップダウンや、メガメニューについても触れていきます。 サブメニューにマーカーを付ける サブメニューのリンクに、マーカーをつけるのは良いアイデアです。このちょっとした視覚的なシグナルがあることで、どこにリンクがあり
Webサイトに一貫性を持たせるパターンライブラリのすすめ
PaulはUXデザイナーであり、デジタルトランスフォーメーションの専門家。非営利団体や企業のWeb、ソーシャルメディア、モバイルを使ったユーザーとの結びつきを支援しています。これまでに30校を超える大学、大規模な慈善団体や企業を支援し、デジタルに精通した人々の変化し続けるニーズに適応する手助けをしてきました。 Webサイトに一貫性を持たせて、管理しやすくすることは、大規模な組織が直面するもっとも大きな悩みの１つです。幸いにも、このときパターンライブラリが役に立ちます。 大規模なWebサイトが直面する特有の問題に対するソリューションとして、気付けば私はパターンライブラリの作成を提案することが増えていました。それは、クライアントがNestleのような大企業であろうと、ストラクスライド大学のような高等教育機関であろうと、あるいは国境なき医師団のような大きな慈善団体であろうと同じです。 では、パタ
プロトタイプがビジネスに利益をもたらす理由
PaulはUXのデザイナーでありデジタルトランスフォーメーションの専門家です。彼はユーザーを促進するためのウェブやソーシャルメディア、モバイルの活用を、非営利やビジネスの分野で手助けしています。 私たちUXデザイナーは、プロトタイプをよく使います。しかし、UXデザイナーにとって、クライアントや経営陣にプロトタイプが時間や経費に見合うものだと説得することはストレスです。この記事では、プロトタイプのビジネスにおける利益について説明していきます。 プロトタイプは私たちが自由に使うことのできるもっとも強力なツールの内の１つです。しかし、多くの人がプロトタイプはお金がかかるデザインツールだと思っています。そのため、プロトタイプは適切なツールだと思われません。 締め切りまでの期間が短く、予算が限られている場合プロトタイプは最初にカットされるものの１つであることが多いです。代わりに、企業は生産工程を短縮
アニメーションをWebサイトに導入するためのテクニック
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち
長いスクロールページでユーザーを引きつけるための５つの方法
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ファーストビューだけで情報を伝える時代は終わりました。最近では長いスクロールや無限スクロールを用いるサイトが増えてきています。ユーザーが簡単にコンテンツをスクロールができ、スクロールすると自然に情報が表示されるサイトは以下のような利益をもたらします。 ナビゲーションがシンプルになる ユーザーをコンテンツにひきこみやすくなる モバイルサイトへの対応が楽になる このテクニックが普及した理由のひとつとしては、モバイル端末の画面を見る人が増えたことが考えられます。画面が小さいほど長いスクロールが必要だからです。 ジェスチャー操作は簡単にできて楽しいものですが、ユーザーは長いスクロールページにわずらわしく感じることもあるでしょう。ここでは、ユーザーの期待に応えるような長い
デザインに便利そうな「スマートパッド」をUX MILKチームで試してみた
デザインの仕事においては、単純作業系のタスクもあれば、想像力を膨らませるようなタスクもあります。作業はできる限り効率化する一方、アイデア出しやデザインなどはじっくり考える時間を取りたいものです。 今回はクリエイターが抱えるさまざまなタスクに便利そうな「スマートパッド」というツールをご紹介したいと思います。実際にUX MILKの開発チームが使ってみた感想などを交えつつ、スマートパッドとは何なのか、そしてこの製品をどう仕事に使っていくのかを見ていきましょう。 スマートパッドとは スマートパッドは一見普通のノートパッドのようですが、専用のボールペンで書くことで、内容がデータ化されるというツールです。ノートの横の丸いボタンを押して電源を入れてから、ノートに書き込み、再度ボタンを押すことでデータが保存されます。今回使っているのは「Bamboo Folio」という製品です。 書いたデータは専用のスマー
Webサイトのアクセシビリティで気をつけるべき６つのこと | UX MILK
Jenna Erickson氏は、Codalのクリエイティブ・ストラテジストです。Codalは、シカゴに拠点を置く、モバイル開発に対するフル・サークルソリューションプロバイダーです。 体験をデザインしている立場として、私たちはインターネットが目の不自由な人を含むすべての人の生活の一部であるということを覚えておかなければなりません。 世界保健機関によると、視覚障害者は世界中で2億8500万人います。これら2億8500万の人々もインターネットへのアクセスを必要としており、誰もが得られる情報を同じように利用できるべきです。 多くの人々は、目が不自由な人はインターネットを使わないだろうと考えますが、それは間違いです。 この見解を心に留めてサイトをデザインすることは、非常に重要です。また、視覚障害者が利用可能なサイトをデザインすることは、そうでない人々にとっても役立つ可能性があります。では、どのよう
インタラクションの参考にしたいUIアニメーション５選
MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
歴史から考えるフラットデザインとマテリアルデザインの違いとは？
もし私がこれから、フラットデザインとマテリアルデザインの違いが視覚上ごくわずかであると発言しても、不愉快にならないでください。 実際、この話題についてあまり知らない人は、どちらのデザインに対しても、とても良く似ていると思うかもしれません。今回はこの問題を解決するために、両方のデザインにおけるアプローチの違いに焦点を当ててご説明します。 マテリアルデザインにいたる歴史 二つのデザインスタイルについての長い議論を始める前に、それぞれのデザインが持っているルーツを見つけることは理に適っています。多くの人がマテリアルデザインはフラットデザインをベースにしていると信じています。 しかし、どのようにして我々はフラットにたどり着いたのでしょうか？ スキューモーフィズム UIとウェブデザイン用語でスキューモーフィズムは、現実世界にあるものを模倣するアプローチを指します。アップルのリアルな質感、明るさ、派手
５つのデザインコンセプトから学ぶマテリアルデザイン
マテリアルデザインは、Googleが提唱するメタファーに基づいたデザイン手法ですが、多くのアプリに適用されだしています。 マテリアルデザインの第一の目的はユーザーを幸せにすることです。 デザインのあらゆる側面（色、タイポグラフィ、ビジュアル、マルチメディア、構造など）は、ユーザーが欲しいものを即座に得られるような快適な環境を作り出し、且つ心地よくそれが実現することを手助けするべきなのです。 マテリアルデザインでは、次のことが求められます: ユーザーインターフェイスは直感的ですっきりしている 情報の階層構造は明確でわかりやすくすべきである 全ての構成要素は配置・目的ともに必然であるべきである。飾りとして使われるアニメーションでさえも、意図や関連性を持つべきである 今回はUpLabsでキュレーションしているデザイナーによるギャラリーの中から、これらのガイドラインと各デザイナーの考える最適解が組
UIデザイン初心者が知っておきたい配色の理論
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 「配色」はデザイナーの持てる手法の中で最も強力な手法の一つで、様々な感情を引き起こせたり、ユーザーの注意を引いたりできます。 ですが、新しいプロジェクトを立ち上げる経験をしたことがある方ならわかるかもしれませんが、プロダクトやサービスの配色を決めるのは非常に難しいものです。 今回は基本の色彩の理論とそれがどのようにUXデザインと関係するのかについてご紹介します。これはあくまでUIやUXのデザインの範囲での色彩の理論で、包括的なデザイン論ではありませんのでご了承下さい。 色彩の理論 色彩の理論には様々な要素がありますが、基本の基本では、補色性、コントラスト、鮮やかさを考慮した色の相互作用において成り立ちます。 補色性は他の色との関係性という点から色を見る方法です。
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
アンチパターンと言われるカルーセルを改善するポイント
しかし、サイトのカルーセルは果たしてユーザーの役に立つものなのでしょうか？ それとも、ただコンテンツを収納するための常套手段として利用されているだけなのでしょうか。 この問いを誰かに投げかけたとしたら、カルーセルはアンチパターン（よく陥りがちな避けるべき悪い典型例）だと答えが返ってくるでしょう。カルーセルが良いデザインだと思っていない人もいるのです。 Erik Runyon氏による調査によると、サイトの訪問者のうちの１％しかカルーセル上でクリックしないということが明らかになっており、しかもそのうちの84％の人が最初のスライドをクリックしているそうです。 Jared Smith氏は自身のサイトShould I use a carousel?で、もし選択の余地があるのなら、カルーセルを使うべきではないと言っています。おそらくSmith氏の主張はLee Duddell氏の考えからきているもので、
海外の人気サービスで使われているCSSスタイルガイド８選
CSSのスタイルガイドとは、コーディングを行う際の決まりやルールのようなものです。 CSSのスタイルガイドを作成することで、一貫性のあるスタイルシートを実現しやすくなり保守性や拡張性を向上させることができます。ひとりで開発するときにも役立ちますが、特にチームで開発を進めるときに効果を発揮します。 今回は参考になる海外の有名サービスのCSSスタイルガイドをまとめてみました。CSSスタイルガイドを作成するときや、コーディングをするときにぜひ活用してみてください。 Airbnb AirbnbのCSS/Sassのスタイルガイドです。各用語のルールから始まりCSSやSassの合理的な記述方法について記載されています。こちらは日本語訳されたスタイルガイドもあります。 Airbnb Style Guide Google GoogleのHTML/CSSのスタイルガイドです。シンプルなデザインのスタイルガイ
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
Gitを実践的に使うために参考にすべき記事20選
チームで開発を行うときにGitのスキルは必要不可欠なものとなってきています。以前、Git初心者向けにスライドをまとめたものを紹介しましたが、今回はGit（GitHub）をさらに活用するために参考にしたい記事を紹介します。 この記事は以下のような方におすすめです！ ・ブランチをどのように運用すれば良いのかわからない。 ・コミットメッセージの書き方にいつも悩んでしまう。 ・issueやPull Requestをもっとうまく活用したい。 ・Git�やGitHubに関する便利なテクニックを知りたい。 ・間違ってコミットしてしまったけど対処法がわからない。 今回は、運用編、コミットメッセージ編、issue編、Pull Request編、テクニック編、問題解決編と５つの内容で分類してみました。実践的な読み応えのある記事ばかりなので、ぜひ参考にしてみてください。 運用編 中の人に聞いたGitHub fl
最新トレンドにも対応！コピペで使える実用性重視なCSSボタン９選
Web制作をする際に必ずと言っていいほど必要になるのが「ボタン」です。 今はCSSのみで作られているボタンが主流で、たくさんのライブラリやスニペットが出回っていますが、作っているサイトによってはアニメーションが過剰すぎたり、トーンが合わない場合も出てきます。 そこで今回は派手でかっこいいアニメーションというより、実用性や汎用性を重視したボタンに厳選して、コピペでお手軽に使用することができるCSSのボタンをいくつかご紹介します。少しお洒落にスタイリング・アニメーションしたいけど、そこそこでいい…と思っている方向けの厳選セレクションです。 コピペですぐ使える実用性の高いCSSボタン サイト上でカスタマイズするものより、もう少し高度なデザインをお求めの方は以下のサイトをご参考下さい。こちらは既に出来上がっているデザインのソースをダウンロードするタイプになりますので、カスタマイズには少々スキルが必
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
