Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

デザイナー/デベロッパー。Fotogramme for Instagram 作者。フリーランサー。ウェブやモバイルアプリのUXディレクション、デザイン、開発を手がけています。 @hiro_kimu emotionale.jp。 Flashという名称が無くなってしまうーー2015年11月末、Flash Professionalのアプリケーション名称を「Adobe Animate CC」に変更するという発表がAdobeからあり、20年に及んだFlashの歴史が転換期を迎えました。「Flashは死んだ」と評されてすでに久しいですが、存在よりも先に名称が消えてしまうことになるとは思わなかった方も多いでしょう。 W3Techsによる調査結果では、2015年12月現在、ウェブサイトでのFlashの採用率は9.6%にまで落ち込んでいます。2011年1月の同調査では28.5%だったことを鑑みると、ウェブに

UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 カレンダーなどでイベントやミーティングの予定を入れるとき、フォームに時間の入力をする作業が発生します。 しかし時間を選択するのは簡単な作業ではありません。ユーザーはセレクトメニューにある長いリストをスクロールしなくてはいけません。ある調査では、ユーザーがよくセレクトメニューで諦めることを証明しています（→ 当サイトのWebフォームの離脱を防ぐためには？も参照ください）。 今こそ時間を選択する際、セレクトメニューを取り外し、クロックウィジェットを使用する時が来たのです。 クロックウィジェットとは？ カレンダーウィジェットは既に日付を選択する方法として定着しています。ユーザーはカレンダーの動きに慣れているので、とても直感的です。クロックウィジェットも同様の効果をも

人間とコンピュータとのやり取りにおいて、アイコンはテキストにはない長所がいくつかあります。 シンプルで分かりやすくフレンドリー。長い文章と置き換えることができる。 画面の中で場所を取らず、特に小さいスクリーンほど使い勝手がよい。 視覚的に楽しみがあり、デザインの芸術性を高めることができる。 一番重要なポイントとして、ほとんどのアプリがアイコンを用いており、ユーザーにとって親近感のあるデザインパターンである。 これらの潜在的な長所がある一方で、アイコンはその潜在的な短所を考慮せずにデザインされると、ユーサビリティ面での問題を引き起こします。 この記事では、UIの点からアイコンに関連した多くの問題を要約して解説し、これらの問題に対する対処法を述べていきたいと思います。 １．アイコンは意味を伝えるもの 理解しにくいアイコンが、伝えるべき機能を分かりにくくしてしまうことがあります。アイコンは意味を

Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens

プロジェクトを遂行するためには、工数の見積もりやスケジュール管理が必要になります。正確な見積もりは難しく納期に間に合わなかったり、残業や休日出勤で埋め合わせたりした経験はありませんか？ 今回は、より正確に工数の見積もるための手法や、差し込み作業を考慮したスケジュール手法などについて解説されている記事をまとめました。 マネージャー、エンジニア、デザイナーなどすべての方に参考なる内容だと思います。 開発の見積もりとスケジュール管理 クックパッド株式会社の方が実践している見積もりとスケジュール管理方法について紹介されています。工数を見積もるステップや、スケジュールを立てるときの注意点、スケジュール管理の方法について学びたい方におすすめの記事です。 開発の見積もりとスケジュール管理 不安とストレスから解放される見積りとスケジュール方法 開発をしているとき、納期に間に合わなかったらどうしようと不安に

WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン