Webデザイナーの制作現場で役に立つ18の無料ツール
Natalyは、ウクライナのSevastopolのWeb開発者で、WordPressとITの執筆に情熱を注いでいます。彼女は自分のLand-of-Webを運営して、制作に役に立つ記事やチュートリアルなどを掲載しています。 デザイナーは彼ら自身を表現しようと常にもがいています。心や魂をプロジェクトに込めることが彼らのモットーです。 すべての仕事、コンセプト、スケッチ、そしてアイコンは、デザイナーの創造力とハードワークから生み出されています。 デザインをあまり知らない大多数の人にとってデザイナーは、ロマンチックで冒険的で、時にはつまらない職業かもしれません。 しかし現実には、自己犠牲を伴う苦職業なのです。 傑作と呼ばれるデザインは、計り知れない努力とブレインストーミングのもとに成り立っています。 さらに言えば、他の職業の人と同じように、デザイナーは締め切りを守り、プレッシャーを克服し、日々の仕
デザインに動画を使うときの７つのベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 インターネットの速度が速くなったことで、動画の人気がさらに高まっています。動画は、サイト上やアプリ内でユーザーが費やす時間を増やすと考えられてるのです。デスクトップ、タブレット、スマートフォンなどで動画を視聴するように、今となっては、動画は私たちの生活のどこにでも存在しています。 「百聞は一見にしかず」ということわざは、まさに動画にふさわしい言葉です。 効率的に利用すれば、動画はユーザーを引き込むのにもっとも強力なツールの１つになります。より多くの感情を伝え、商品やサービスを「感じてもらう」ことができるでしょう。しかし同時に、通信量が多くなり、スクリーンを動画で埋めてしまう可能性があります。ですので、特に注意して使用する必要があるのです。 この記事では、デザイン
Lean UXの基礎となる４つのステップ
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 アジャイル開発に基づきプロジェクトを始めるとき、Lean UXは役立つテクニックです。伝統的なUXのテクニックは、開発スピードが速い場合はあまり機能しないでしょう。今までと同じようにしていたのでは、UXについて考える十分な時間はありません。 Lean UXを含めたUXの実践論は、素晴らしいユーザー体験を届けるという同じゴールを持っていますが、Lean UXの場合、プロジェクトへの取り組み方が少し違ってきます。どのように違っているのか見ていきましょう。 Lean UXとは？ Lean UXは、デザインによるユーザー体験を重視しており、伝統的なUXに比べると成果物はあまり重視していません。また、Lean UXでは、チーム全体とのコラボレーションが高いレベルで求め
覚えておきたいモバイルUXに関する17の統計・洞察
Jeff Sauro氏は、統計とユーサビリティに関するコンサルティング会社である、MeasuringU社の創設者であり、1,000社以上の顧客を抱えています。彼は、統計やUXに関する、20ケ以上の文献と５つの本を執筆しています。 モバイルでのUXは、もはやニッチな分野ではありません。モバイル端末の影響や体験を考慮せずに、ウェブサイトやソフトウェアのUXについて語ることは難しいです。 これまでに、2013年と2015年におけるいくつかの事実と洞察を紹介してきました。 今回は、ネット上の多くのソースから厳選した情報と、モバイルユーザビリティに関する我々の研究をご紹介します。 モバイル端末の利用者の増加 アメリカにおける成人の57%から68%（ソースによる）がスマートフォンを所有しています。この数値は、イギリスでは約64%、ドイツでは54%です。これは年齢によって異なっており、ミレニアル世代では
ボタンのラベルや配置順序のベストプラクティスとは | UX MILK
サイトやアプリにおける典型的なフォーム（もしくはダイアログボックス）には、通常いくつかのボタンがあります。ほとんどのケースで、ユーザーは２つの選択肢を目にします。１つはユーザーの主となるタスクを表し、一方は付随する副次的なタスク（フォームに入力した内容の取り消しやキャンセルなど）を表します。 この記事ではアクションボタンに関する基本的なUXについて概観し、デザイナーの間でよくある質問である「OKかキャンセル、どちらのボタンが最初にくるべきか」に答えます。 エラー防止 Jakob Nielsen氏のユーザビリティ・ヒューリスティックによると、「丁寧なデザインによって、最初の段階で問題が起こることを防止する」とあります。ユーザーが突発的に間違ったものを選択してしまうかもしれない状況を排除できるように努力する必要があります。 濃淡で視覚的な区別をつける ２つのボタンの違いを明確にするために、ボタ
歴史から考えるフラットデザインとマテリアルデザインの違いとは？
もし私がこれから、フラットデザインとマテリアルデザインの違いが視覚上ごくわずかであると発言しても、不愉快にならないでください。 実際、この話題についてあまり知らない人は、どちらのデザインに対しても、とても良く似ていると思うかもしれません。今回はこの問題を解決するために、両方のデザインにおけるアプローチの違いに焦点を当ててご説明します。 マテリアルデザインにいたる歴史 二つのデザインスタイルについての長い議論を始める前に、それぞれのデザインが持っているルーツを見つけることは理に適っています。多くの人がマテリアルデザインはフラットデザインをベースにしていると信じています。 しかし、どのようにして我々はフラットにたどり着いたのでしょうか？ スキューモーフィズム UIとウェブデザイン用語でスキューモーフィズムは、現実世界にあるものを模倣するアプローチを指します。アップルのリアルな質感、明るさ、派手
モバイルアプリのUXを改善する４つのディテール
アプリが成功するかどうかは、さまざまな要素に依存しています。ですが、ユーザー体験に勝るものはありません。目立つアプリは、どれも優れたUXを提供しています。 モバイルUXを考える上では、ベスト・プラクティスをなぞるのが堅実な方法です。また、全体像をつくる時は、あったら良いものの必要ではないデザイン要素をとりあえず消してしまうのも簡単で良い方法でしょう。 ただし、「良い体験」と「素晴らしい体験」の違いは、多くの場合これらの細部についてどれだけ考え尽くしたかにかかってきます。 この記事では、なぜディテールがデザインにおける目につきやすい要素と同様に重要なのか、そしてアプリの成功をどのように決定づけるかについて紹介します。 スプラッシュスクリーン ユーザーがアプリを起動したとき、一番最後に回したいことはユーザーに待つよう伝えることです。ですが、アプリに時間のかかる初期設定のフェーズがあり、この手順
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
UIデザインの歴史に学ぶシャドウと奥行きの使い方
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように
UIデザイン初心者が知っておきたい配色の理論
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 「配色」はデザイナーの持てる手法の中で最も強力な手法の一つで、様々な感情を引き起こせたり、ユーザーの注意を引いたりできます。 ですが、新しいプロジェクトを立ち上げる経験をしたことがある方ならわかるかもしれませんが、プロダクトやサービスの配色を決めるのは非常に難しいものです。 今回は基本の色彩の理論とそれがどのようにUXデザインと関係するのかについてご紹介します。これはあくまでUIやUXのデザインの範囲での色彩の理論で、包括的なデザイン論ではありませんのでご了承下さい。 色彩の理論 色彩の理論には様々な要素がありますが、基本の基本では、補色性、コントラスト、鮮やかさを考慮した色の相互作用において成り立ちます。 補色性は他の色との関係性という点から色を見る方法です。
ノンデザイナーでも配色に困らないカラーパレットツール10選
色はデザインにおいて重要な役割をもち、色の組み合わせひとつでユーザーに与える印象は大きく変わります。しかし、配色を決めるのはなかなか難しく、悩んでしまいがちです。 今回はそのようなときに役立つ、配色を提案してくれるサイトや、配色がコレクションされているサイトを紹介します。配色のアイデアを与えてくれるサービスばかりなので、ぜひ活用してみてください。 HELLO COLOR http://jxnblk.com/hello-color/ クリックすることで２色の色の組み合わせを提案してくれるサイトです。また、スペースキーを押すことで、提案された２色に合う色を表示してくれます。配色のデザイン知識がなくても使うことができる便利なサービスです。 PALETTABLE http://www.palettable.io/ 提案された色が「好き」か「嫌い」かを選択していくだけで、カラーパレットが完成します。
マテリアルデザインに見る機能的なアニメーションの６つの法則
機能的なアニメーションとは、演出のみのアニメーションと違い、その意図が明確かつ論理的に校正された、控えめなアニメーションのことです。それはUIにおける認知的負荷を軽減させ、変化の見落としを防ぎ、そしてよりその空間の記憶を呼び起こしやすくさせ、何よりもUIに命を吹き込みます。 その動きは、増えたり、分かれたり、その形やサイズが変わることで、画面をさらに生き生きと見せることができます。機能的なアニメーションは、ナビゲーション上でユーザーをスムーズに移動させ、スクリーン上の要素の配置の変化を説明し、要素の階層を明確にするために使用するものです。 成功する機能的なアニメーションには、以下の６つの特徴があります。 1. レスポンスがよい UIデザインにおいてビジュアル・フィードバックはとても重要です。なぜなら、ユーザーの認知に対するごく自然な要求に訴えかけるからです。現実世界ではボタンやコントロール
Uberのライバル「Lyft」のリニューアルにおけるUX改善
Lyftのデザイン原則 Lyftはデザイン原則をピラミッド型で定義するために、マズローの欲求５段階説を用いています。私は、Lyftがデザイン原則それぞれの重要度を示すために、このような心理学と融和させているところにとても興味がありました。 デザイナーである私は、デザイン決定において皆のアイデアが一致しない場面によく遭遇します。基本となるデザイン原則を抜きにして判断を下すことは非常に難しいことです。そこで、私は同僚のKlara Pelcl氏からの後押しもあり、経営層を説得しデザインチームの中で核となるようなデザイン原則をJules Cheung氏と協力しながら定めました。 私たちはブレインストーミングを行い、６つの原理を作り出しました。それは、ユーザーを知ること、明確さ、一貫性、効率、協調、そして、美しさです。Lyftのデザイン原則の図が、 実際にそれを適用するために何ができるのかを考えるき
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
独学プログラマーの私がプログラミング初心者に贈るたったひとつの教訓 | UX MILK
昔の私は、スーツを着てオフィスで働く傍ら、漠然としたスタートアップのアイデアを温めているような男でした。ですがある日、コーディングについて学ぶことにしたのです。 プログラミングとの出会い ある人が終業後に自慢げに話しているのを立ち聞きしたところによると、その人はRubyと呼ばれるプログラム言語を使って、自分の一連の業務を簡単に自動化したというのです。私は「ふぅん、Rubyね」と思って帰宅し、Googleで検索して15秒も経たないうちに、適当なRubyの初心者チュートリアルに取り組んでいました。 その一週間後、私はプログラマーの集まりに初めて顔を出しました。皆がScala、Clojure、Goといった言語について話し込んでおり、吸収すべき知識にあふれていました。私はオライリーの本を三冊借り、それぞれ約50ページずつくらいまで進めました。 そんなある日、友人からEmacsを習得するよう勧められ
かっこいいロゴデザイン作成のための参考サイト10選＋α | UX MILK
ロゴデザインはプロダクトやサービスのアイデンティティともなる大事なデザイン要素です。 一度制作すると様々なものに繰り返し利用されることが多く、載せる媒体によってサイズや色の制限などが発生し、シンプルに見えるものでも作るとなると難易度は高いものです。 そんな製作者の頭を悩ませる機会の多いロゴデザインですが、制作するにしろ、誰かに制作してもらうにしろ、たくさんのロゴを見るところから始めると良いでしょう。今回はロゴデザインの参考になるサイトを厳選してご紹介します。 ロゴデザインの参考になるサイトまとめ Logaster [PR] Logasterはロゴを自動で作成してくれるWebサービスです。サインインして、任意の文字列と条件を入力するだけでたくさんのロゴを瞬時に作成してくれます（スモールサイズなら無料で利用可能です）。 また、他のユーザーによって作成されたロゴもギャラリーとして閲覧することがで
魅力的なイラストを活用したアプリのUIデザイン７選
Appleは完璧を追い求めることで有名であり、それは 私たちがUpLabsで称賛しているところでもあります。 Appleはとりわけインターフェイスに関しては常に境界線を押しひろげ、 他社にとっては高いハードルを作りあげてきました。彼らはスキューモーフィズムを世の中に広めた企業であり、彼らの方針にコミュニティ全体を従わせたのです。 フラットスタイルの時代となった今もなお、彼らはなんとか自分たちに忠実であり続けようとし、崇高なピクセルパーフェクトなデザインを生み出すための製作者を奨励していました。 より現実的なモチーフのマテリアルデザインなどに比べ、半現実的なディテールのコンセプトは、明快さやエレガントさにおいて劣りますが、芸術的な美学を保つことはできます。 美しいグラデーションや、表現豊かなタイポグラフィ、想像性豊かなアニメーション、滑らかなグラフィック、そして豊富なドローイング を使うこと
GoogleのUXデザイナーがサイトをチャットボット化して学んだ9つのこと
Adrianは現在Googleでデザインをしているスイスのチューリッヒ出身のフリーランスUXデザイナー。Twitter：@azumbrunnen_。 私は数ヶ月前から自分のWebサイトをチャットボット化する実験を行いました。このひとときの間に多くのご意見を頂き、マスコミがニュースで紹介してくれたりもしました。公開24時間の間に300通あまりのメールも頂きました。たくさんの方々が私のWebサイトと会話してくれたようで、まずは本当にありがとうございます。 何人かの方が今回の施策に関してのインサイトに興味を持ってくれたので、その辺を少しお話していきたいと思います。今回はそもそも対話型、ということで少し語りかける風にいきたいと思います。 それでは、まいりましょう！ botなどの対話型トレンドに対する憂鬱 私の母は毎日お決まりのように「失敗を恐れていては何も始まらず、失敗を多く経験することで大きな武
マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
