スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方
読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C
心理学から学ぶ！心地よいUXデザインを作る方法
心理学や神経科学からUXデザインを良くする方法について紹介。ユーザー体験を最大化するためにUXは欠かせません。1990年代のインターネット初期の事例から現在に至るまでWebサイトのデザインなどどう変遷してきたのか、必見です。是非ご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
早くもAdobe XDのUI素材が！最近のWebデザインで使われているテクニックの勉強になるUI素材のまとめ
デザインでここぞという時に強みになるのが、引き出しがどれだけあるかです。 最近のWebデザインで使われているさまざまなテクニックの勉強になるUI素材、Adobe XD用、Photoshop用、Sketch用の無料素材を紹介します。 Guacamole Adobe XD, Adobe Photoshop, Sketch XDにはデフォルトでApple iOS, Google マテリアル, Microsoft WindowsのUIキットが利用できますが、Guacamoleでも70種類以上のUI素材、150種類以上のアイコン素材などが利用できます。 XD対応の素材はこれからどんどん増えてきそうですね。 Adobe XDってなんぞ？という方は下記を参考にしてください。 UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介
サービスデザインで取り入れたい、デザイン思考ツール
ペルソナやカスタマージャーニーマップ、アジャイル開発などなど。 UXやUI開発に携わる人なら知っている、有名なデザイン思考ツールはいろいろあります。 今回は、こういった良く使われているデザイン思考ツールにプラスして取り入れたい、サービスの課題をより深くより広く分析できるようなデザイン思考ツールをご紹介したいと思います。 なぜなぜ分析ユーザーに連続的に質問を重ねることで、UXの表面に現れた現象の背後にある理由を掘り下げていき、ユーザーが抱える問題の本質を分析する手法です。 例えば、飲食店を想定した次のやり取りを見てみましょう。 参考：Marc Stickdorn, Jakob Schneider『THIS IS SERVICE DESIGN THINKING.』（ビー・エヌ・エヌ新社）p.167ランチタイムの接客効率化という問題の裏に、別の問題があったということが良く分かります。同じくサービ
【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 | TechAcademyマガジン
【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 Webサイトを作る上でグリッドデザインが良い理由について述べています。レスポンシブデザインなどデバイスに対応するWebデザインが主流になっていますが、これからWebデザイナーを目指している方は必見の内容でしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を
ライティングはUIデザインである | ykazu.com
低下するライティングスキル 私たち日本人は、文脈や背景の定義を必要とせず「相手を察すること」で疎通を図る「ハイコンテキスト」なコミュニケーション文化だと言われています。LINE や SNS でも短いテキストで会話が成立することは日常です。手書きからメールへ、そのメールは今やチャットに代わり、テキストの発信はどんどん増えています。 一方で、語彙力やライティングスキルが低下していると感じることはないでしょうか。記事のコピーペースト氾濫、分かりにくい文章表現、何かを PR する長文が書けない──。こうした問題はデザインやエンジニアリングの職域に関係なく、成果の質を下げているかもしれません。 ライティングは UI であること Basecamp や Campfire を展開している 37signals による『Getting Real』の中では ”Copywriting is Interface D
7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
2016年後半はbotが来るわ。LINE-bot作ったけどマジでやばい。
MSもfbもbotだbotだといってて、なんやろねぇと思ったけど、LINEでbot作ったら、ああ、これは確実に来ると思った。やばい。slackのbotと違ってすごいカジュアルだ。楽だし。なんとなくwikipedia検索botを作りました。LINEの「友達追加」で下記のQRコードで追加できます。あきたら、なくなります。来週には消えると思う。 2016年にbotが来る理由 ログインいらない:LINEやslackのユーザ情報ですでにわかる。 インストールいらない:もうユーザはアプリいれてくんない プッシュができる：LINEのpushをoffにするやついない 開発費が安い UIが限定的なのでwebよりユーザを誘導しやすい。 応用が効きすぎ：ECでも金融でもサーバー監視でもなんでも使える 今後は人工知能と組み合わせたbotが日常化すると思う。MSさんのbotのフレームワークはそれが前提になっている。
3分でわかる!フラットデザインとマテリアルデザインの違い - 99designs
フラットデザインとマテリアルデザインは一見似たようなグラフィックデザイン手法に思えますが、実は根本的な考え方、表現の仕方が異なります。それぞれにメリット・デメリットが存在し、シーンに合わせて使用していくことで、効果的に魅せることができます。ここでは、簡単にフラットデザインとマテリアルデザインの違いについて述べていきます。 フラットデザインのメリット フラットデザインはリッチデザインと呼ばれる立体的でリアル感のあるデザインの流行が後退した頃に注目され始めました。スマートフォンのアイコンやロゴタイプでもフラットデザインを用いるケースが増えています。 フラットデザインのメリットについて考えてみましょう。フラットデザインはさまざまな媒体に浸透しているため、抵抗なく受け入れることができるということ、人の目に優しくストレスを与えにくいデザインであること、そして、無駄な装飾をそぎ落としシンプルに磨きをか
新しいものが大好きなGoodpatchで2月に話題になったアプリ、サービス、デザインまとめ（2016） | Goodpatch Blog
みなさんこんにちは！ UIデザイナーとしてGoodpatchでインターンをしているワラスです！ あっという間の1ヶ月が過ぎて、今年2発目のmemopatchまとめです。最近時間が経つのが以前より早くなったような気がします。それでは今月も、新しくておもしろいサービスやアプリを紹介していきたいと思います！ 今までのまとめはこちらからどうぞ。 サービス Should I get up?: To stay in bed, or not to stay in bed 今日の天気や降水確率、風の強さ、日の出からどのくらい時間が過ぎているのか、などの情報から、このままゴロゴロしているべきか否かを教えてくれるだけのサービスです。この潔さがいいですね。予定のない休日に使ってみてください。 http://www.shouldigetup.com/ Mondriantab タブを開くたび、モンドリアンの構成が
フラットデザインへの長期接触： このトレンドが、どうユーザーの効率を下げているか
クリックできるUI要素のシグニファイアがなかったり弱かったりすると、ユーザーは次第にページ中をあやふやなままクリックしたり、マウスオーバーするようになる。そうすると、効率が落ちる一方、コンテキストからの手がかりやクリックへの即時フィードバックがより期待されるようになる。 Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency by Kate Meyer on November 8, 2015 日本語版2015年12月21日公開 完全にフラットなビジュアルデザインのインタフェースではリアリズムや立体効果をまったく利用しない。それは結果的に、クリックできることをユーザーに伝えるために従来から利用されてきた強制的な視覚的手がかりに引導を渡すものであった。 極端にフラットなインタフェースの人
デザインの確かな知識が身につく！Webサイトやアプリのデザインの勉強になるスライドのまとめ
実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UX/UIデザイン - OHAKO | 企画～実装をご支援
ランディングページに使えるデザインのアイデア80種類以上！商用利用無料のPhotoshopとSkech用の素材 -Landing
モバイルアプリのUIデザインの参考になるスライド10選
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
UX/UIデザイン - OHAKO | 企画～実装をご支援