サクサク感をデザインする
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多
MUJI GALAPAGOS｜無印良品
無印良品は、ガラパゴス諸島を巡る旅に出ました。発端は、無印良品の製品群とガラパゴスの生き物たちに「独創と進化」という類似性を見出そうという着想でした。 しかし、孤絶した特殊な環境下で、生物が懸命に生きるさまを見つめることは、全く新しい思考の糧に手をのばすことでもあると考えています。AIの登場により、人々のくらしや幸福のかたちが移ろいつつある今。 1980年、飽和と過剰に対するアンチテーゼとして生まれてきた無印良品は、世界の変容を肌で感じつつ、再び考え始めます。 エクアドルのキトから、ガラパゴス諸島の玄関口バルトラ島を目指します。赤道直下のこの国は、環境と生物を大切に、自然大国を目指しています。キトは標高2850m。ここから離陸し、下るように太平洋へ飛び、一路ガラパゴスへ。 ガラパゴス諸島は赤褐色の火山島です。進化論の聖地と言われる理由は、海底火山の噴火で出現した絶海の孤島に様々な生物が漂着
セ･リーグ6球団のサイトで見る！Webサイト配色の技｜株式会社アクトゼロ｜クリエイティブブログ
Webサイトの色を決めるとき、どうやって決めていますか？サイトの目的、ターゲット、どのような印象を与えたいか etc… ここらへんがポイントになってくるのではないでしょうか。Webデザインにおける配色が、どのような印象を与えているのか考えてみたいと思います。 さて、一ヶ月をきりました。何がって……野球の開幕が！とりあえず昨日オープン戦で久しぶりの野球を楽しんできました。………と、全く関係のない話をしているわけではなく…。Webサイトの配色を調べるにあたって今回はセ･リーグ6球団のWebサイトをテーマに取り上げてみました。各球団チームカラーがあるので、そのカラーを使いどのような印象を与えているか見てみたいと思います。 まず、冒頭で書いた配色を決める基準となるポイントを考えてみます。目的、ターゲット、与えたい印象の３つを書き出してみると、ざっくりではありますが目的とターゲットはどの球団もだいた
uiGradients
A handpicked collection of beautiful color gradients for designers and developers
WebデザインにおけるF字型レイアウトの活用方法
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 この記事ではF字型レイアウトの基本、利点、作成方法ついてわかりやすく説明します。 F字型レイアウトとその働きについて 「F字型レイアウト」はユーザーがサイトを見るときの一般的な視線の動きをあらわします。 FはFastのFでもあり、多くのユーザーはWebサイトを高速で読み流しているのです。 F字型パターンは、200人以上のユーザーが数千のWebサイトを閲覧した結果を記録したNNGroupのアイトラッキング調査によって普及されました。多様なサイトやタスクに関わらず、ユーザーの視線の動きはほぼ一定していることが調査によってわかりました。この一定な視線の動きこそがアルファベットのFの字型に類似していたのです。 F字型は以下の３つの要素によって構成されています。 ユーザー
わざわざ「フジロック行ってきた」と報告される問題 | 文春オンライン
この時期になると、身の回りで「フジロックに行ってきた」ってわざわざ私に自慢する親父がたくさん出るんですよね。あっ、はい。いや、興味ないんですよね。ギターとか楽器はやってましたけど、忌野清志郎も死んだしパソコン作業中に音楽聞く習慣もなくなったので。いまはもっぱらホワイトノイズ聞きながら原稿書いたり調べものしたりしています。 なぜフジロックに行った人はわざわざ私に報告しますか ただ、フジロックが楽しければ、自由に楽しんでいいと思うんですよ。ほんと、妨害しないからお好きにどうぞ。好きなミュージシャンが出て、心地よかったんでしょ。良かったね。ほんと良かったね。 なのに、なぜフジロックに行った人はわざわざ私に報告しますか。いや、その情報要らないから。あーたが楽しかっただけでしょ。フジロックが好きな人同士で楽しく経験を語り合えばいいじゃないですか。「何年振り何度目だったんですけど」とか貴殿のライフスタ
ディテールはプロダクトの成功を左右する
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 製品の成功にはさまざまな要素が関連していますが、製品全体のユーザー体験はほかの要素よりも重要です。新しいアプリやサイトを設計するときには、ベストプラクティスを実践することが堅実な方法です。しかし、全体像を描く際、あれば良いが必須ではないデザイン要素はいい加減にしてしまいがちです。ところが、良い経験と悪い経験の違いはこれらの細かいディテールをどれだけ考えてデザインすることに関係してくるのです。 この記事では、視覚的なフィードバックやマイクロコピー、ホワイトスペースに焦点を当てて、これらの小さい、あるいは大きいディテールがなぜデザインのよりわかりやすい要素と同じくらい重要で、製品の成功を左右するかを説明します。 視覚的なフィードバック 視覚的なフィードバックは、大き
現役デザイナーも注目！最近話題のウェブデザイン50個まとめ 2017年7月度
ウェブサイトの制作に追われるうちに、アイデアが枯れてしまったという経験はないでしょうか。目まぐるしく変化を続けるウェブデザインの世界では、新しいアイデアやトレンドをうまくサイトに盛り込むことも重要です。 ユーザーに新しいウェブ体験を提供することで、コンテンツをより魅力的に仕上げるだけでなく、伝えたいメッセージやコンセプトをうまく表現できるようになります。 今回は、最近話題になった新作ウェブデザイン50個をまとめて紹介します。配色えら�びやデザインが苦手な人でも参考にできる、最先端で実践的なテクニックを得意としたサイトを集めているので、今後のデザイン制作にも活躍してくれるでしょう。 クオリティーが凄い！最近話題になったウェブデザイン40個まとめ 2017年5月度 これでもう悩まない！2017年のデザイントレンド完全ガイド 現役デザイナーも注目！最近話題になったウェブデザイン50個まとめ Sp
CSSだけでアコーディオンを作る方法（レスポンシブ＆矢印付）
今回はjQueryを使わずに、CSSだけでアコーディオンをサクッと実装する方法を紹介します。どれもレスポンシブ対応です。なお、後半では矢印アイコン付きのものも載せています。コピペして使って頂いてOKです。
HTMLとCSSだけ！要素の表示・非表示を切り替える方法
今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え
UXデザイン初心者のための５つのトレーニング
たとえば、あなたがデジタルビジネスのオーナーまたはマーケティングの担当役員で、UXデザインの分野について詳しく知りたいとします。すでにUX関連のニュースやデザインのトレンドについて調べただけでなく、自社のUXデザイナーやコンサルタントに、UXの業務がビジネスプラン全体とどのように適応しているか何度も尋ねてきました。さらに、最終的な製品やモックアップがどのように見えたり感じたりするかについて、UXデザイナーにフィードバックを求めたりすることもあるかもしれません。 しかし、もう一歩踏み込んで、根本的にユーザー体験がどのように作られているのかを知りたい場合はどうすればよいでしょうか。または、新しいWebサイトやアプリのアイデアがあり、専門家を雇う前に自分で作ってみたいと思うかもしれません。その場合、おそらく少しトレーニングが必要でしょう。そこで私たちの出番です。 この記事は、UXデザイン全体の流
魅力的なサイトに必要不可欠なシンプルなナビゲーション
Christineは、appendToのフロントエンドの開発者およびライターです。appendToではチームのためのJavaScriptトレーニングを提供しています。 「インタラクティブ」「一貫性」「ミニマル」は、Webサイトのナビゲーションが話題となるときに共通して聞かれる言葉です。しかしこのリストにはもう１つ「シンプル」という言葉を加えなくてはなりません。 シンプルナビゲーションは、Webデザイン要素の中でもっとも美しいものの１つです。インタラクティブとミニマルデザイン、それぞれの特性を組み合わせることでWebサイトに一貫性をもらたします。 シンプルナビゲーションには以下の２つの特徴があります。 Webサイトのメインナビゲーションには、３～７つのセクションしかありません。これは、ドロップダウンメニューやメガメニューによる表示またはサブ的なナビゲーションの場合は当てはまりません。 デフォ
ノンデザイナーのビジネス職におすすめ！デザインを勉強できる本6選｜Goodpatch Blog グッドパッチブログ
一方で、グラフィックデザイナーやファッションデザイナーなど、時にはアート的な表現を含む、ビジュアルデザインをメインとするデザイナーも、世の中には多く存在します。 デザインには、「設計」と「装飾」という得て非なる二面があるようです。もう少し、深く勉強してみたくなりませんか？ そこで、社内のUIデザイナー、UXデザイナーに「デザインを理解するためのおすすめ本、教えてください！」と聞いてみました。 ビジネス職でキャリアをスタートさせたばかりの人や、デザイナー以外の職種の人が、「デザインとは何か」を勉強したい時に役立つ本をご紹介します。 初心者でも読みやすいものをピックアップしてみたので、参考にしてみてください。 おすすめ本、教えます 1. ノンデザイナーズ・デザインブック ノンデザイナーズ・デザインブック インタビューを開始して、デザイナーとエンジニアの両方から薦められたのがこの本です。 「基本
UXデザインにおけるストーリーボードの役割と活用法 | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXデザインを行う際、ワークショップやインタビューなどが主流な調査方法として挙げられます。そして調査結果はユーザーストーリーやプロセスフローで表現されます。また、チームのメンバーと考えを共有したり解決策を話し合うための手段として、ペルソナやWebページのレイアウトであるワイヤーフレームといったツールが使われます。 しかし、これらの調査を行うためには設計した製品のターゲットとなる、実在するユーザーを考慮しなければなりません。製品をより良いものにするためには、ユーザーと製品の間で何が起こっているかを理解し、製品がどのようにユーザーの生活を良くするのかを把握しておく必要があります。そして、ユーザーへの理解を深めるためにストーリーボードを活用します。 この記事では、UX
モバイル向けWebデザインのための基本的なガイドライン
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 モバイル向けにデザインをするなら、そのデバイスの使われ方とデバイスそのものの特性に配慮する必要があります。モバイルデザインを始める際に役立つ原則はいくつかありますが、これらはユーザーリサーチに取って代わるものではありません。絶対に厳守するべきガイドラインではないのです。 モバイルデザインでは、たくさんのことを考慮する必要があります。その多くは標準的なUXデザインでも踏まえる事項ですが、同時にモバイルデザイン特有のものも考慮しなければなりません。モバイルで提供するサービスを既存のものと統合する予定ですか？ そうであれば、レスポンシブデザインとアダプティブデザインのどちらを採用しますか？ 編注：レスポンシブデザインとは、デバイスに関係なく画面サイズに応じて表示を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本デザインセンター | Nippon Design Center, Inc.
Stripe.com Navigation
Smart Fixed Navigation
【CSS】box-shadowで影をつける方法とサンプル集
2017年7月に読んだWeb・デザイン関連の本
