画像とテキストのジグザグ型レイアウトは、流し読みの効率を下げる
装飾用の画像は、互い違いになったリストのレイアウトで使われていると、ページを流し読みするユーザーがつまずく原因になることが、アイトラッキング調査でわかった。一方、テキストや画像が縦に整列しているページでは、ユーザーは効率的に流し読みをしていた。 Zigzag Image–Text Layouts Make Scanning Less Efficient by Kim Flaherty on November 26, 2017 日本語版2018年6月27日公開 画像は、大きな写真であれサムネイルであれ、現在のWebデザインには欠かせないものだ。特に、トップページや「こういう仕組みです」（How it works）ページのようなストーリーを伝えるページで、企業が複雑なトピックについて書いたり、製品の説明をするときには、関連する画像を付けた説明的なテキストのかたまりがあり、次の列も同じようなテキ
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
有名サイトの事例から学ぶ12のWebデザイン・レイアウト
ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード
新人Webデザイナーへ向けた、考え方から実践までの話 | Web制作に関するブログ | 株式会社シロクロ
Web制作会社 シロクロ Web制作に関するブログ新人Webデザイナーへ向けた、考え方から実践までの話 新人Webデザイナーへ向けた、考え方から実践までの話 2016年6月15日 Webデザイナーとしての心構え、普段やるべきこと、実際にデザインするときの手順など、弊社の新人デザイナーに伝えていることをまとめました。学生や新人Webデザイナーの方に役立てていただければ幸いです。※ディレクターが打ち合わせやワイヤーフレーム制作などを担当し、デザイナーは純粋に画面を作る役割として話を進めます。 はじめに何のためのデザインか色んなWebサイトを見ることWebサイトを模写することデザインする前にWebサイトの目的／目標を理解する同業他社のWebサイトを調べるワイヤーフレームのままデザインしないデザイン作業時世界観（トーン&マナー）とレイアウトを決める文字、色、装飾、余白のルールを決める必要であれば構
マージンを制するものがスマートフォンデザインを制す！〜iPhone6/6Plusの登場で、マージンがどう変化したのか〜 | 株式会社エウレカ
マージンを制するものがスマートフォンデザインを制す！〜iPhone6/6Plusの登場で、マージンがどう変化したのか〜 デザイナーの亀谷です。 突然ですが、スマートフォンのデザインで、大きく差が出るポイントはどこだと思いますか。 もちろん意見は様々あると思いますが、私が考える最も大きなポイントは「マージンの取り方」です。 そこで今回はその「マージン」をテーマに、iPhone5とiPhone6/6Plusのマージンの変化に関してお話したいと思います。 マージンを制するために重要なもの 美しいマージンの取り方には知識と経験が非常に重要です。 水野学氏の著書「センスは知識からはじまる」にもあるように、美しいマージンの取り方においても知識が非常に重要です。 私は、具体的には以下の3つの目線から日々インプットを行っています。 常日頃から可能な限り多くのサービスに触れることで、感覚を養う。 美しいと感
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
【WEBデザイン担当者必読】目的別WEBデザイン・レイアウト8選 | LISKUL
Webサイトを制作する際、自分が作りたいサイトがどのようなレイアウトに適しているのか分からず悩んだことはありませんか？ 特に、初めてサイト制作をおこなうというWebデザイナーさんなどは悩んでしまう方が多いと思います。 しかし、Webサイトのレイアウトを「目的」を軸にして分類すると、あるパターンや規則性が存在しています。 目的というのは「ブランドイメージを向上させたい」や「Webサイトからの資料請求数を増やしたい」などです。 今回は、目的別に整理した、それぞれの抑えるべきポイントを紹介いたします。 1. 商品やサービスの認知度を向上させたい 【プロモーションサイト】黒田官衛兵公式サイト JAPAN X 浅田真央〜8年間の軌跡〜 【プロモーションサイト】ポイント写真を多用している プロモーションサイトというのはユーザーに商品やサービスの認知度を向上させるのが目的です。そのため写真が多用されてい
単なる流行りじゃない？！水戸黄門型レイアウトが定番化した理由を考えてみた
定番っていいですよね。わずかな退屈さはありつつも、安心できます。 スニーカーならオールスター、スマホならiPhone、ビールならスーパードライみたいな。 Webサイトにも2012年ごろから急増し、現在では定番化したレイアウトパターンがあります。 ちなみにこのパターン▼ その代表例、Evernoteのサイト▼ http://evernote.com/intl/jp/ このパターンで商材となっているものの多くが、物理的なプロダクツではなくクラウドなど新しめのウェブサービスで、皆さんも頻繁に遭遇するのではないでしょうか。 グリッドレイアウトの亜種ともいうべきこれに正式名称があるのかわからないのですが、とりあえず僕は心の中で水戸黄門型と呼んでいます。時代劇の定番だし。 ※あくまでイメージです 定番化して今もなお増え続けている理由をちょっと考えてみました。 多分この辺じゃないかなーと A. 整然とし
ScaleOut | Supership
「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
ScaleOut | Supership
「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DNP、読む速度を約2倍にする自動レイアウト技術
ログイン - はてな
NameBright - Coming Soon