もっと早くデザイナーに声をかけろ
SIerのインハウスデザイナーとして働いてるんだけど、うちの会社の業務フローがクソすぎてストレスが溜まっている。 あの、PMのみなさん、ていうか我が社の開発標準つくってるみなさん。 外部設計とか機能設計とか、「設計」ってついてる工程にデザイナーをアサインしてください。 デザインって「設計」っていう意味なので。 別に、知識マウントとか偉ぶってるとかでもなんでもないです。 外部設計も機能設計も社内のエンジニアがエクセルで作っているけど、なんでデザイナーを呼んでくれないんですか？ あなたたちがやってるそれ、デザインですよね？ そのくせエンジニアは、自分が設計書を作っていても「デザイン」をしているという自覚は全くない。 それどころか「自分にはセンスが無いから〜！」と変にデザイナーを持ち上げてくるんだけど、あなたたちのやってることもデザインですよ。 なのに、自分たちだけですっかり外部設計とか機能設計
スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて
スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクが適しているかもしれません。 スマホ向けのナビゲーションデザインについての考察を紹介します。 Using Hamburger Menus? Try Sausage Links by Bradley Taunt ソーセージリンクは先週公開した記事「テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか」にも通じるものがあります。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューを使うなら、ソーセージリンクを試してみて ハンバーガーメニューとは、長所と短所 ソーセージリンクとは、長所と短
デザイナーはコーディングを学ぶべきか？ 2019年変わりつつあるデザイナーとコードの在り方
デザイナーはコーディングを学ぶべきか？ デザインやプロトタイプ、エディタなど、最近のツールの進化に伴い、この問題を見直す時期がきたようです。 2019年変わりつつあるデザイナーとコードの在り方、ワークフローについて紹介します。 Should design tools code? by Fabricio Teixeira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイナーはコーディングを学ぶべきか？ これからはデザイナーはデザインに専念できるワークフローに デザイナーはコーディングを学ぶべきか？ コードを学ぶデザイナーに価値がある、そう支持する人たちには2つの考え方があります。 最終的な成果物にできるだけ近いプロトタイプを作成することにより、他人によってそれが実装される可能性が高くなる（デザイナー自身ではない場合）。 デザ
Micromodal - Tiny javascript library for creating accessible modal dialogs
Introduction Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change. Following are some of the interactions handled by the library:- Closing modal on overlay click
Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
「根拠のないリニューアルは悪」- 株式会社ネコメシ 山本郁也氏が語る、UXを考える上で大切なこと｜U-NOTE【ユーノート】-イベントまとめプラットフォーム
2006年4月19日 ... マーケティングの世界で古くから使われている格言に「ドリルを買いに来た人が欲しいの はドリルではなく穴である」というものがある。ソリューションを売る難しさの本質を表現し ている言葉だが、これが未だに理解されていない。 2. Break the bias 「確証バイアス」 ⇒自分に都合の良いものを信じてしまいやすくなるというもの。 起業家というのは中立的な立場になりにくい。 「生存者バイアス」 ⇒成功者の意見を聞いてみたいということはよくあること。 ただ、成功している人の言っていることが全て正しい訳ではない。 成功している理由を分かっている人はあまり多くない。 「リニューアルすれば、良くなる症候群」 ⇒ビジュアルのリニューアルは、根本的な設計が間違っているという論理の上で、少し気に入らないから直すくらいのレベル。 自分が気に入らないという理由だけで行うと、たいて
コンテンツを意識してWebデザインするとは
11月27日に WordCamp Tokyo 2011 が開催されました。そこで「コンテンツ戦略を意識した今後の CMS の姿」という講演をしました。WordPress を中心にしたイベントでしたが、私の講演では WordPress に留まらず、今後必要とされる Web コンテンツに必要とされる CMS のあり方について解説しました。講演の意図について知りたい方は前回の記事「コンテンツを軸にしてCMSを使おう」をご覧ください。 機能至上主義からの離脱 CMSの話になると、どうしても機能の話になるのは以前から疑問を感じていました。日本だと Movable Type の支持は高いですが、MT と WordPress を機能比較でしか議論できないのはどうも寂しい気がします。機能は重要ですが、機能を前提にしてサイト構築すると、結局クライアントやサイト観覧者のメリットにならない場合があります。ニーズ
OmniGraffleを使ったテンプレート作り
OmniGraffleは、ワイヤーフレームをささっと書くのに大変便利なツール。以前「サイト制作に便利なOmniGraffleステンシル」という記事で、高品質のステンシルを幾つか紹介したことがあります。これらを使えば手軽に完成品に近い見た目の絵図を作ることが可能になります。なかなか便利な OmniGraffle ですが、通常版とプロ版の２つあり、どちらか迷っている方もいるのではないでしょうか。今回紹介するハウツーは通常版でもある程度出来ますが、プロ版で効果を発揮するテンプレートの作り方です。 変数を活用する 書類を制作する際に、何度も同じことを書く場合や、ページ番号を挿入したい場合があります。こうした情報を手入力していると大変手間がかかります。OmniGraffle にはテキストフィールドに変数を利用することが出来、ダイナミックに文字や数字を生成することが出来ます。例えば、各キャンバスをペー
Yahoo!検索の「ユーザーインターフェース設計」
分業による効果 一般的なデザイン作業において、下記のようなデザイン作業の上流部分をごく限られた人数で行い、そこから先の展開部分を大人数で行う方法を取る場合が多いと思われます。 インタラクションの設計 ビジュアルの設計 主要要素のHTMLマークアップ・CSSコーディング設計 しかし、モジュールの概念を取り入れることにより、デザイン作業の上流部分から分業を行うことが可能になります。 作業者のスキルやサービスへのコミット具合によって、多少ぶれる場合もありますが、そこはサービスの全体的なルールや作業時の補助ツールによってコントロールを行うことが可能です。 そのため、モジュールの命名規則や運用ルールについては、あらかじめドキュメントを作成した上で、ある程度厳密に運用を行う必要があります。 コミュニケーションの効率化による効果 最初にインタラクションの設計時に命名したモジュール名や要素名を、ビジュアル
Webヅクリスト必携 - 書評 - デザイニング・ウェブナビゲーション : 404 Blog Not Found
2009年06月08日21:00 カテゴリ書評/画評/品評Art Webヅクリスト必携 - 書評 - デザイニング・ウェブナビゲーション オライリー矢野様より定期便にて献本御礼。 デザイニング・ウェブナビゲーション J. Kalbach / 長谷川敦士 / 浅野紀予監訳 / 児島修訳 [原著:Designing Web Navigation] これは、すごい。 Webデザインは当然blogosphereでも当然ながら人気で、その人気ぶりは 人気エントリー - はてなブックマーク からも伺い知ることが出来るが、「Web記事によるWebデザイン入門」は、どうしても断片的なものとならざるを得ず、体系的かつ包括的なものとなるとありそうでなかった。今後は「本書を読まずしてWebサイトを語るな」となりそうな一冊である。 本書「デザイニング・ウェブナビゲーション」では、Webサイトを訪れる人の体験にとっ
Webページの情報を共有してもらうための３つのポイント (ユーザビリティ実践メモ)
複数の人が関わるシナリオを意識しよう Webサイトを訪れたユーザが、商品・サービスの購入など何らかの意志決定を行う際、自分ひとりだけの判断で決めず、他の人と相談してから決めるという場合は、実はかなり多いものです。 弊社のユーザ行動観察調査では、以下のような例が見られました。 幹事役の数名が、各自で会場候補を検索各自が自分の選んだいくつかの候補を持ち寄り、どの会場にするか相談決定 【例2．企業におけるIT製品の導入】 部門の担当者が、おおまかな要求仕様を決め、メーカーサイトや販売店サイトを検索性能や価格などを一覧できる比較表を作り、IT管理者などに相談（IT管理者がWebサイトを閲覧する場合もあります）絞り込んだ候補について決裁文書を作り、上司に相談決定 【例3．住宅ローンの借り換え】 妻が金融機関サイトや比較サイトで情報収集夫に相談して候補を絞り込む絞り込んだ金融機関の店舗を夫婦で訪れ、担
Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!ニュースのデザイナーの黒田・由衛です。 Yahoo!ニュースが2009年4月27日にリニューアルしました。今回のリニューアルでは、お客様に快適にサイトを利用していただけるよう最速でページを表示させることに重点をおきました。 お客様がウェブを閲覧するのは1日の中のほんの限られた時間です。その貴重な時間を割いてYahoo!ニュースに来ていただくわけですから、1ページでも多くの記事を「読みやすく」「ストレスなく」見ていただけるようにするのが、Yahoo!ニュースがお客様にできる最高のおもてなしだと考えています。そこで、今回のリニューアルでは、サイトデザイン側からのアプローチとして以下の2点の施策を行いました。 １
メガメニュー、Webサイトデザインの新常識 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 向こう半年の間でメガメニューがいたるWebサイトにあらわれるだろうという予測がSitePoint: Mega Menus: the Next Web Design Trendで紹介されている。予測のベースになっているのはJakob Nielsen氏が23日に公開したMega Drop-Down Navigation Menus Work Wellのようだ。Jakob Nielsen氏はNielsen Norman Groupの会長を務めるとともに、Webデザインユーザビリティの権威として名が通っている人物。 Mega Menus: the Next Web Design TrendではWebデザイナがナビゲーションをデザインする場合はたいだい次の
「クリックされないサイトに価値は宿らない」――JAL、3年半ぶりのHP刷新に託した意図
「クリックされないサイトに価値は宿らない」――JAL、3年半ぶりのHP刷新に託した意図：大企業のWebサイト構築法（1/3 ページ） JALが3年半ぶりにホームページを刷新した。Web経由で航空券やホテルの予約拡大を狙い、顧客ごとに情報を切り出して提供できるガジェットや自動推薦エンジンを取り入れた。Yahoo!などのポータルサイトにならったレイアウトに変更するなど、細部の作り込みにもこだわった。 日本航空（JAL）のホームページは、月間400万人のユーザーが訪れる情報ポータルサイトだ。その10％に当たる40万人が、航空券の予約やホテルの申し込みにホームページを使う。 2008年12月、JALは約3年半ぶりにそのホームページを全面刷新した。ホームページ経由による航空券やツアーの申し込みを増やすことが狙いだ。そのために会員／非会員を問わず、サイト内の回遊率を高める仕組みの構築を模索していた。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Backlog UI リニューアルの舞台裏 / Backlog Renewal UI
株式会社VOYAGE GROUP
http://www.cyberdesignz.com/blog/website-design/how-web-design-trends-change-with-the-advent-of-ipad/