サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
優れたユーザーインタフェース（UI）を実現するチェックリスト36項目
【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく！ 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない
Google IO 2018のMaterial Designアップデートまとめ｜池内健一
Google I/O2018でMaterial Designが大きくアップデートされました。Material Designのサイトの更新量が大きすぎて全量を把握するのも大変ですが、要点だけまとめました。 目次 ・Material Themingで多様なスタイルが可能に ・コンポーネントの更新 - App Bars：Bottom - Backdrop - Extended FAB - Sheets : Side - Text Fields - ButtonsMaterial Themingで多様なスタイルが可能に今回のアップデートで一番インパクトがあったのがMaterial Themingでした。これまでMaterial Designではどのアプリも画一的なスタイルに制限されていましたが、Material Themingによって多様なスタイルが可能になりました。これにより、ブランドイメージに
UXデザイナーのポートフォリオはプロセスを伝えることが大事。｜灰色ハイジ
自分のデジタルプロダクトデザイナーとしてのアメリカでのポートフォリオが必要になったため、海外のUX・プロダクトデザイナーのサイトを50個くらい見て回った。 決定的に日本の個人のポートフォリオと違うなと思ったのは、プロジェクトのケーススタディを紹介をしている人が多いこと。デザイナーの数（＝競合の数）など背景も違うのかもしれないけど、デザイナーの面接もしたことがあるので、採用視点で見ても仕事のプロセスが載っているのは良いなと思う。 何故UX・プロダクトデザイナーに限定しているかと言うと、デザイナーと言ってもさまざまで、例えばグラフィックデザイナーとUXデザイナーではプロセスも勝負する土俵もまったく異なるから。 目次： 1. 採用する人に考えさせない 2. プロジェクトのプロセスを見せる 3. ポートフォリオの構成 4. 自分がやったことを掘り下げる 5. ポートフォリオも作品のひとつ1. 採用
慣れるUIをつくる 事例編｜UXマン / プロダクトデザイナー, UXリサーチャー
前回のおさらい 「慣れを生むデザイン」は難易度が高いですが、慣れによる体験を無視することは出来ません。 ユーザーが触るものを作るデザイナーであれば、慣れるUIを作ることやそのためのデザイン方針について考えを巡らせる必要があります。 前回は、このUIに慣れてもらうためのデザイン方針の1つとして、「寛容さ」を提案しました。 目次 4. 世界で最も使われているカラシニコフの話5. カラシニコフの教訓 世界で最も使われているカラシニコフの話ここでひとつ、ユーザーの間違いやコンテクストに寛容だったことで大成功しているプロダクトの例を挙げましょう。 世界で最も利用者の多い銃のひとつに、「カラシニコフ」という銃があります。正式名称「AK-47」という、とても有名な銃です。 この銃が世界中に拡散したのには、明確な理由がありました。 それは、保守・管理性がよく、トラブルが起きづらい、多少手荒に扱っても大丈夫
とある求人サイトをデザインリニューアルした話｜Yoko Nishida
副業で「コデアル」という求人サイトのデザインリニューアルをしました。このリニューアルでは、何をやったのかを振り返ってみようと思います。 1. プロジェクト概要コデアルはリモートワークで副業をしたい方向けの求人サービスです。主にエンジニアやデザイナーに手伝って欲しいIT系スタートアップの求人案件を紹介しています。 ※リニューアル前のデザイン ミッション このプロジェクトで自分自身に課していたミッションは3つ。 1. 情報設計の見直し ユーザーが求人を探しやすい＆応募しやすいように情報整理する。 2. 汎用性のあるUIを提案 エンジニア特化ではなく、デザイナーやディレクターにも使いやすいUIに改修する。 3. デザインシステムの構築 ブランド / カラー刷新に伴うスタイル変更、一貫性のあるUI設計ができるようデザインガイドラインを作成する。 主な担当範囲 情報設計、UIデザイン、デザインガイド
ロゴの「マーク」はあったほうがいいの？なくてもいいの？｜三宅佑樹 / Yuki Miyake
こんにちは、三宅佑樹(@yuki_miyake)です。 普段はビジュアルデザインやクリエイティブコンサルティングを通じて企業のブランドづくりやサービスづくりをお手伝いしています。 デザインの仕事を始めて9年ちょっと。これまで、100まではいかないかもしれませんが、数十個のロゴをデザインしてきました。 ロゴは、幾何学的な形や有機物を図形化したマーク(シンボル)と、組織などの名前を記述した文字(ロゴタイプ)とで構成されます。 場合によってはマーク(シンボル)が無く、文字(ロゴタイプ)だけの場合もあり、それはそれで特に問題なく運用されていたりします。 そこで、ロゴをデザインする際にしばしば悩むことになるのが、「マーク(シンボル)は必要なのか？」「どういう時はマーク(シンボル)があったほうがよくて、どういう時は無くても大丈夫なのか？」ということです。 一般的に分かりやすく伝えるためにここまで「マー
デスクトップ動画を録画するおすすめ方法5選Windows＜保存版＞
Windows10だけですぐに簡単にデスクトップの録画ができます。ほんと以前とは変わりましたね。本記事では、デスクトップの動きや音声を録画して保存し動画にする方法を解説します。ご自身にあった方法で試されてみてください。 PCのデスクトップを動画にする デスクトップの操作やゲーム画面をそのまま動画にしたいときってありますよね。 ゲーム実況はもちろんのこと、何かを解説する動画ですとか、クラウドソーシングでPC作業の仕方を動画で示して指示を出すなど、あらゆる場面でデスクトップ録画は便利ですよね。 かつては高額なキャプチャボードや限られたソフトでしかできなかったのですが、技術進歩もあって実はとても簡単にできるようになりました。 それでは早速、最新のデスクトップ録画の方法をご紹介します。 デスクトップの録画方法 Windows10ゲームモードで録画 こちらがWindows10のデスクトップ録画の動画
WebデザイナーのためのVue.js事始め
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
