Webデザインのスタイルガイドの作り方 - ポップインサイト
Tomasはリトアニアの旅行ライフスタイルに関する起業家およびブロガーです。彼はブログや毎週配信されるニュースレターで、趣味やライフスタイルデザイン、起業精神について執筆をしています。現在、100万人の人々のライフスタイルを良いものにするというミッションの元、世界中を飛び回っています。 Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意す
Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
エウレカ&グッドパッチのデザイナーに聞くワイヤーフレームの作りかた！ | Goodpatch Blog
先日、エウレカさんとグッドパッチのデザイナーで第一回合同勉強会を開催しました。今回のテーマはワイヤーフレームです。この勉強会は、ワークショップを通してナレッジの共有をし合い、個々のデザイナースキルを上げる目的があります。エウレカさんのレポートはこちらです。合わせてご覧ください！ １.ワイヤーフレームを作る意味とは ワイヤーフレームを作る意味についてお話をしてくれたのは、エウレカ原さんです。案件を進めるときにまずすること、ワイヤーフレームはなぜ必要か、ワイヤーフレーム制作で意識するポイントについて解説していただきました。 ワイヤーフレームを書く前に 案件を進めるとき、まずすべきことはプロダクトの目的とゴールの再確認です。 最終的に作っているものの方向性を見失わないようにするために、 何が目的でそれを実装するのか？ なんで必要なのか？ それを作ることによって何を解決するのか? を考える必要があ
第1回 安定とスピードのデザイン | gihyo.jp
ビジュアルデザインと機能性 ビジュアルデザインと機能性。ウェブサイトやアプリケーションのデザインでは、この２つは密接な関わりを持っています。 多くの人は、ビジュアルデザインと聞いて、ものを美しく（もしくは格好良く、楽しく）見せるためのデザインを連想するかもしれません。まさにそれはデザイナーの仕事です。世の中をより美しく、格好よく、楽しくすることは、人が関わるものを生み出すデザイナーにとっての使命です。それをないがしろにすれば、何のためのデザインか、何のためのデザイナーか、と問われることになるでしょう。 ただし、道具の世界では、デザインが機能性に直結しています。人は道具を使うとき、はっきりした目標を持って扱います（はさみを使って紙を切る、蛇口をひねって水を出す等）。そういった目標をどれだけ達成できたか、ストレスなく達成できたかという観点＝機能性は、道具の価値に関わってきます。ウェブサイト
第1回 使いやすいメニューはどう作る？ ～水平メニュー | gihyo.jp
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
Bootstrap Zero
Browse Themes by Tag Preview all themes Resources for Bootstrap Useful links for additional Bootstrap themes, extras and code snippetsOfficial Bootstrap Bootply Playground Bootstrap 4 Upgrade BootstrapBay WrapBootstrap HTML5 Zero StartBootsrap Why Bootstrap? It's no surprise that Bootstrap is the most popular frontend framework. Web designers and developers can leverage Bootstrap to build responsi
JOURNAL | Nature dot.
海外の2014年まとめ記事の中に、DropboxのUXデザイナーが自身のユーザビリティテストの模様をブログで発信しているものがありました。 他人のプロセスを知るのは勉強になり、せっかくなので日本語で残してみます。 ※実際にDropboxのサービスをPCで開きながら読むと分かりやすいです。 ■ テストの目的 Dropboxの「写真」ページの課題を明らかにすること ■ テストの内容 何をテストする？：DropboxのWebアプリケーション 誰に?：既存のユーザーで写真をアップしてる人 どこで行う？：コーヒーショップの外を通りすがる人に →サンフランシスコのカフェの外で、行き交う人にゲリラ的にインタビューしていたみたいです。 確かに、日程調整してインタビューするよりフランクな状態を作れるので率直な意見を吸い上げることができそう。 ■ テストの項目 １：写真をアップロードしてもらう ２：アップロー
[CSS]CSS3を使用してアコーディオンを実装するチュートリアル
IE6やFx1.5などCSS3非対応ブラウザにも配慮した、CSS3のアニメーションで開閉するアコーディオンを実装するチュートリアルをThe CSS Ninjaから紹介します。 Create the accordion effect using CSS3 デモページ 上記のキャプチャはCSS3に対応したChromeのもので、アコーディオンの開閉はスムーズなアニメーションで行われます。 CSS3非対応ブラウザでは、アニメーションのエフェクト無しで開閉します。 CSS3で使用してるものは、角丸とアニメーションの開閉です。 アコーディオンはdl要素で実装されており、下記のようなシンプルなものです。 HTML <textarea name="code" class="html" cols="60" rows="5"> <dl> <dt><a href="#Section1">Section 1</a
デザインやレイアウトの参考になる、管理画面・ダッシュボードのデザインショーケース - NxWorld
Dribbbleで見かけたのを中心に、全体的なデザインや各要素の配置レイアウトなど参考にさせてもらおうと思いメモしていた管理画面・ダッシュボードのデザインが溜まってきたので、自分の整理も兼ねてまとめました。 管理画面やダッシュボードで重要なのは見易さや操作性の高さだと思いますが、デザインにもこだわりたいという場合にいろいろ参考になります。 紹介している中にはデザインをPSDなどの形式でデザイン素材としてダウンロードすることができるものもいくつかあり、ただデザインを見るだけでなく実際にどのようなレイヤースタイルで作成されているかを見たり、それらをベースに自分好みの見栄えに変更することも可能です。 紹介しているデザインでダウンロードできるものを使用する際は、ライセンス等は各自で再度確認してください。
Yahoo!ニュースの見出し行間「5ピクセルの差」に見えた光～ヒートマップでUI改善
社長の宮坂がゲスト出演した、11月27日放送のテレビ東京系「カンブリア宮殿」。Yahoo!ニュースの裏側にも触れられており、ご覧になった方もいらっしゃるかもしれません。 （放送バックナンバー：爆走する国民的サイト！これがネットの底力だ！－ テレビ東京） 公式ブログ新コーナー「news HACK」ではこれまで、Yahoo!ニュースにおけるスマホ利用の成長などをお伝えしてきましたが、今回は、同番組の中でも登場したYahoo!ニュースのUI改善事例について、番組で触れられなかった部分も加えて詳しくお伝えしたいと思います。 これからご紹介するのは、スマホブラウザ版Yahoo! JAPANトップページのA/Bテスト事例（※Yahoo!ニュースのアプリ版との違いなどについては、こちらの記事をご参照ください）。 テスト結果は現在のスマホ版トップページに使用されているものと同様ですが、まず具体的な説明に入
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ
http://www.reindel.com/accessible_news_slider/
MockFlow - Wireframe Tools, Prototyping Tools, UI Mockups, UX Suite, Remote designing
Online Mockup, Wireframe & UI Prototyping Tool
TECH PROjin
のんびりデザインしているような。
