小さなWebデザインプロジェクトの価値
Ericは20年以上の経験を持つWebデザイナーで、電子書籍『Your Guide to Becoming a Freelance Web Designer』の著者です。彼のキャリアはこちらから確認できます。 Webデザイナーは、自身の仕事に情熱を持っている人がほとんどで、ほかの業界と比べてもその情熱は際立っています。しかし、収益についていえばWebデザインもほかのビジネスとまったく変わりません。主な目的は、いつでもクライアントを獲得し安定した暮らしを手に入れることです。 そのため、相応しい金額で大きなクライアントを獲得することについての情報がたくさん行き交っています。しかし、それらの情報は必ずしも現実的とは言えません。特に、キャリアを始めたばかりのフリーランスデザイナーにとっては難しいでしょう。経験を積んだ専門家でさえ、大きなプロジェクトに取り組む欲求やキャパシティをもっていないこともあ
北欧のUXデザイナーが日本の文化から学んだこと
Usable MachineのUXデザイナー/Design Matters。デザインと技術に関して書くことが大好きなデザインオタクです。 日本人は、複雑なデジタルテクノロジーを使いこなし、伝統文化からインスピレーションを引き出すことの本当の意味を理解していると言えます。私たちは北欧のデザイナーとして、日本のデザインと文化から学ぶべきものを見つけたいと思いました。そこで私たち、Design MattersのJulieとMichaelは、デジタルデザインの新しい視点を見つけるために東京に５日間、滞在してみることにしました。 日本はデザインの文化においてクオリティの高さは良く知られていて、特にテクノロジーの分野で高い評価を得ています。しかし、日本のデジタルプロダクトと非デジタルプロダクトのデザインはまったく異なることに気が付きました。インテリアデザインを始めとした日本の非デジタルデザインについて
トグルスイッチの誤用をやめよう
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
フリーランスのWebデザイナーが起業する際にかかるコストとは
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 What Does It Cost to Run a Freelance Web Design Business? すべてのビジネスには、独自の「事業を行うコスト」が存在します。多くの場合、所属している業界によって、事業を立ち上げて稼働させるコストや、事業を成り立たせるコストは決まりやすいです。しかしフリーランスWebデザイナーは、コストについて非常に柔軟に考えることができる仕事です。 どこに住んでいるのかや、どのような種類のサービスを提供しようとしているかによって、立ち上げ費用は実質ゼロにすることもできます。逆に、数千ドルに達する可能性もあるでしょう。小規模で働く単独の起業家であれば、伝統的な産業ビジネスが夢見るレベルの負担の軽いレベルのコスト管理のみで済みます。
マイクロインタラクションを考慮すべき４つの理由
自身の旅行体験をまとめているフリーWebデザイナー。オンラインの小さなリブランディング会社と仕事をしている。会社の理念は、顧客が希望を持ち、人生を新たにもっと楽しめるような製品を作り、提供すること。 マイクロインタラクションは、私たちの周りに溢れています。これはユーザインターフェイスの特定の瞬間のやりとりに用いられるものです。たとえば、ユーザーがモバイルアプリのボタンをタップするとナビゲーションメニューが開かれるなどが一般的なマイクロインタラクションになります。 より詳しく述べると、マイクロインタラクションとはユーザーがどこかでなにかの操作をしたときに起こる、インターフェイス上のアニメーションや変化を指します。ユーザーにとって有益な情報を提供するインタラクティブなアニメーションのことだと考えてください。マイクロインタラクションを利用する理由はたくさんありますが、ここでは４つの例を紹介しまし
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
フラットデザインのためのベストプラクティス
フラットデザインは、シンプリシティ（単純化、簡素化）の考えにそったミニマリズムにもとづく、洗練されたデザインと考えられているでしょう。しかし、フラットデザインにおけるシンプリシティの実現は簡単ではありません。きれいにまとまったビジュアルと機能的なデザインを創り出すことを考慮し、すべての要素を同じ目的のためにデザインしなければなりません。 ユーザーのためになるフラットデザインの活用方法には、どのようなものがあるか見ていきましょう。 見えないデザイン 不要なスタイリングを取り除きましょう ユーザーが気付かないような、「見えないデザイン」を実践するのは良いことです。なぜなら、ユーザーが毎回デザインに気を取られていては、「体験への没入」の妨げになってしまうからです。ゴールは、特定のアクションやメッセージを、ユーザーに素早く簡単に理解してもらうことのはずです。必要な機能を明らかにするために、デザイン
なぜNetflixのトップページデザインは不親切なのか？
代わりにセカンドビューにおかれているのは３つのタブ。退会が容易であることの説明、視聴スタイルの紹介、そして料金一覧です。 Netflixのトップページにあるのは、サービスに興味を持ち登録を検討しているユーザーが求める情報のうち最低限のものだけと言えるでしょう。 なぜ作品群はトップページに必要なのか そもそもなぜ作品群をのせたトップページデザインは「最適なデザイン」なのでしょうか？ 今年７月のイベントで日本版Huluが示した次の見解がヒントになりそうです。 加入の動機となるものは「どんな動画が観られるのか」という点だと考えているので、（中略）「どんな動画が観られるのか」を知ってもらう工夫をしています。 http://www.appbank.net/2017/07/08/iphone-application/1372560.php 確かに登録を検討しているユーザーにとって信頼性や料金と同じくら
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
グラフィックデザイナーからUXデザイナーに転向するには
この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。 How to Change Your Career from Graphic Design to UX Design 編集部より：この記事では米国におけるUXデザイナー事情を取り上げています。後半、教育環境などの紹介も米国のものになりますので予めご了承ください。 世間のデザインに対するイメージと100％一致する職業があるとすれば、それはグラフィックデザインに関する職業です。グラフィックデザイナーは、皆さんにも馴染みのあるマクドナルドの金色のアーチから、映画のポスターのタイポグラフィや色使いに至るまで、幅広くさまざまなもののデザインをしています。また、私たちの身の周りにあるアイコニックで普遍的なデザインの数々を作り出しています。 では、なぜグラフィックデザイナ
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。 ワイヤーフ
より良い検索フォームのための９つのベストプラクティス
検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。
UXを向上させる５種類のアニメーションの使い方 | UX MILK
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
コンバージョン率を改善する入力フォームにおける10のルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
「プログラミングは簡単に学べる」という嘘 | UX MILK
プログラミングを学ぶことは簡単なことではありません。それは誰でも知っていることです。 ですが、残念ながら「プログラミングは簡単！」といった文句でビジネスをしようとするマーケターはたくさんいます。彼らのプロダクトを使えば、あるいはそうなるのかもしれませんが。 Hearing the WWDC keynote say coding isn't hard frustrates me. It's extremely hard. You're setting beginners up for huge disappointments. — Tyler McGinnis (@tylermcginnis33) 2016年6月13日 WWDCキーノートで「プログラミングは難しくない」と言っているのは本当に腹が立ちます。ものすごく難しいですから。初心者を騙してがっかりさせるだけです。 誰かがあなたに対してプ
Gitを実践的に使うために参考にすべき記事20選
チームで開発を行うときにGitのスキルは必要不可欠なものとなってきています。以前、Git初心者向けにスライドをまとめたものを紹介しましたが、今回はGit（GitHub）をさらに活用するために参考にしたい記事を紹介します。 この記事は以下のような方におすすめです！ ・ブランチをどのように運用すれば良いのかわからない。 ・コミットメッセージの書き方にいつも悩んでしまう。 ・issueやPull Requestをもっとうまく活用したい。 ・Git�やGitHubに関する便利なテクニックを知りたい。 ・間違ってコミットしてしまったけど対処法がわからない。 今回は、運用編、コミットメッセージ編、issue編、Pull Request編、テクニック編、問題解決編と５つの内容で分類してみました。実践的な読み応えのある記事ばかりなので、ぜひ参考にしてみてください。 運用編 中の人に聞いたGitHub fl
ボタンデザインの歴史と進化から学ぶベストプラクティス
ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
