Must Mustはこれから観たい、もしくは観ようと思っている映画やTVシリーズのコレクション及びレビュー専用のSNSです。保存した情報を元に、自分の好みと近い映画やTVシリーズをレコメンドしてくれる機能も備えています。 スマホのディスプレイが年々拡大し、画面操作において親指を伸ばしてタップしたり、両手で操作したりしなくてはいけないという場面がアプリを使う上で起こる中で、Mustは画面下半分でほとんどの操作が完結できるよう設計されています。 使い勝手もさることながらUIのモーションにもこだわりを感じます。例えば、ホーム画面で気になる映画のメインビジュアルをタッチすると、大きさが一回り小さくなり、手を離すと浮き上がるように拡大しながら前面に出てきます。この一連の動きによりユーザーは画像を押したことを認知できます。メインビジュアルが前面に出てくると、追随するように映画の詳細情報が画面下から出て
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
情報が多いサイトのデザイン、メニュー構成に困っていませんか？ 情報が多いサイトの場合、グローバルメニューの項目が多くなりすぎて見づらくなってしまいがちです。 ただでさえグローバルメニューは、初めて利用するユーザーにとっては扱いづらいものなのです。 それは何故かと言うとグローバルメニューというものはサイトの構造通りの並びになります。しかし、初めて利用するユーザーはサイト自体の構造を理解していないため、そもそもグローバルメニューを使って探すことからしないといけません。 だからこそ、グローバルメニューはユーザーにとってより使いやすいものにする必要があります。 そこで、弊社では広いスペースを活用し階層が深いページまで構造をわかりやすくまとめることができるメガドロップメニューを推奨しております。 今回は、メガドロップメニューを採用しているサイトの一覧を紹介したいと思います。
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ？ お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ？ お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ？ どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確（もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな） よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
あなたはコンバージョン率やクリック率の高いボタンを作る方法をご存知でしょうか？ディレクターに「コンバージョン率が低い」と言われると「あれ？自分のデザインのせいかな？」なんて思ってしまいますよね。そこからフォームやボタンのデザインを見直すWebデザイナーさんも多いと思います。 ではどうすればコンバージョン率の高いボタンを作ることが出来るのでしょうか？それは「人の心理を理解する」ことです。そうすることであなたもコンバージョン率の高いボタンを作ることが出来ます。 事実、A/Bテストを用いた検証でコンバージョン率を大幅に改善した事例は数多く存在します。今回はその事例と「コンバージョン率の高いボタンを作る方法」を併せてご紹介します！ そもそもコンバージョンボタンとは？ 本題の前に、そもそもコンバージョンボタンとは何のことか再確認してみましょう。コンバージョンボタンとは、Webサイトに訪れたお客様に資
Webサイトのデザインは紙のデザインと異なり、技術的な制約が強く、特に最近は様々な環境（デバイス、ブラウザ、画面サイズ、屋内・屋外など）での閲覧に対応できることを求められます。そのため、戦略から要件、コンテンツ、機能と論理的にデザインを決めていくと、どこかで見たことあるような没個性なデザインになりやすいものです。（注：ここでいうデザインは視覚的なデザインを指します） マルチデバイス、マルチブラウザが進み、レスポンシブWebも選択肢の一つとして一般化した昨今では、Webデザインの没個性化はますます進んだ印象があります。例えば、Googleが公開しているマテリアルデザインのガイドラインを見ても、デザインのパターン化と属人性排除の思想を如実に感じることができます。また、データドリヴンなサイト改善を積極的に行っていくと、「デザインの個性」と成果に大した因果関係がないことを痛感します。 没個性なデザ
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
「Use Your Interface」はおしゃれなUIを動画で閲覧できるサイトです。メニューをマウスオーバーしたときの挙動や、次のページに遷移する際のインタラクションなどのUIをアニメーションで閲覧できますよ。また、それを実際に使っているページヘのリンクも貼られているので、動作を自分で試せるところが便利です。 以下に使ってみた様子を載せておきます。まずUse Your Interfaceへアクセスしましょう。 おしゃれなUIがアニメーションで再生されています。どんな風に動いているのかひと目で分かりますね。各アイテムの左下にそのUIを使っているウェブページへのリンクが貼られています。気になる動作を見つけたら、実際にアクセスしてみて確認できますね。 また、このサイトはTumblrで作られているので、気に入った方はフォローしておくと最新の情報がキャッチしやすくなりますよ。ぜひご活用ください。
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
