Musicmap | The Genealogy and History of Popular Music Genres
DOWNTEMPOINDUSTRIALRAPBLUESJAZZJAMAICANCOUNTRYPOPMETALINDUSTRIALRHYTHM ‘N’ BLUESBREAKBEATHARDCORE(TECHNO)DRUM ‘N’ BASSTRANCEHOUSETECHNOPUNK / WAVEGOSPELHARDCORE(PUNK)ROCK ‘N’ ROLLGOLDEN AGEALTERNATIVECONTEMPORARY(ELECTRONIC) DANCE (MUSIC) / EDMELECTRONIC MUSICBLUE NOTERHYTHM MUSICPOP & ROCK MUSICBREAKBEAT DANCEFOUR-TO-THE-FLOOR DANCEROCKHEAVY MUSICINDUSTRIALMETALROCK ‘N’ ROLLGOLDEN AGEWAVEPUNK/HAR
iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外
ハンバーガーメニューと非表示のナビゲーションはUX指標を悪化させる
Webサイトのメインナビゲーションを非表示にすると、発見しやすさはほぼ半減する。その上、タスク達成に時間がかかるようになり、タスクがより難しく感じられるようになる。 Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kara Pernice and Raluca Budiu on June 26, 2016 日本語版2016年9月26日公開 非表示のメニュー（ハンバーガーアイコンなど）と、表示されているメニュー（ページトップを横切る形で置かれたリンクなど）について、定量的なユーザビリティテストをおこなったところ、以下のようなことが明らかになった： 非表示のナビゲーションは発見されにくい。表示されているあるいは部分的に表示されているナビゲーションよりも。 ナビゲーションが非表示だと、ナビゲーションはユーザーから利用されにくくなる
問題解決のためのスタイルガイド入門
定義が広いスタイルガイド フロントエンド開発者からスタイルガイドという言葉を耳にするようになりました。効率的、かつ一貫性のある見た目とコードをつくるための共有ツールとして、スタイルガイドが使われることがあります。一見、目新しくみえるスタイルガイドですが、最近生まれた新しいアイデアではありません。ロゴやコーポレートカラーの使い方を記したスタイルガイドは昔からありますし、ライターにもスタイルガイドがあります。 このように、開発者も、デザイナーも、ライターも同じように「スタイルガイド」という言葉を使っています。人によって、その言葉から受ける印象も異なれば、必要としている要素も異なります。YUI 並の UI アセット をスタイルガイドに含めることを期待している人もいます。アプリや Web サイト開発におけるスタイルガイドを作る際に難しいのは、何で作って管理するかではなく、どの範囲をスタイルガイドと
「ボタン」のウェブデザインはどのように進化してきたのか？
by webtreats ウェブサイトやアプリにおいて不可欠な要素である「ボタン」が、いかにしてデザインを変えてきたか、また効果的なボタンを作るために重要な要素について、ソフトウェア開発者のNick Babichさんが解説しています。 Buttons in UI Design: The Evolution of Style and Best Practices - UX Planet https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e ボタンは毎日目にするインタラクションデザインの要素のひとつです。ボタンは非常にシンプルな要素に見えますが、Babichによれば、ボタンのデザインは数十年の間に大きく変わっていて、常に理解しやすく明瞭なデザインが求められ
初心者でも使える6つ厳選！無料でワイヤーフレームを作成できるツール
初心者でも使える6つ厳選！無料でワイヤーフレームを作成できるツール 無料で使える「ワイヤーフレーム作成ツール」を6つ紹介する記事です。初心者でも簡単に使えるツールだけピックアップしています。手書きやIllustratorなどで作るよりも、効率的にWebサイトの設計ができるので便利です。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 ワイヤーフレームとはWebサイトのデザインの設計図で、サイトのどこに何を配置するかをイメージしたものです。モ
【Webサービスを作ろう】事例からUI設計を学べる「Nicely done」がすごい勉強になる！
【Webサービスを作ろう】事例からUI設計を学べる「Nicely done」がすごい勉強になる！ いろんなWebサービスの画面設計・UI設計をまとめている「Nicely done」というサービスの紹介。Webサービスの企画、開発をする上で参考になるはずです。Webデザインの勉強にも役立ててみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 海外ではあらゆるWebサービスの画面設計、UI設計をまとめている「Nicely done」
Web制作者のためのワイヤーフレーム講座「役割と考え方」編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
オハヨウからオヤスミまで。ディレクターの鮫島です。 今回から全3回にわけて「ワイヤーフレーム」の考え方や書き方などをお届けいたします。 第1回となる今回は、ワイヤーフレームの役割や考え方など思想的な部分をお伝えします。 第2回はワイヤーフレームの作成前に準備するべきことなどをお伝えし、第3回は実際にどう書いたらいいか、などをお送りする予定です。 ワイヤーフレームの書き方や考え方は人それぞれ微妙に違うかとは思いますが、私の考え方が少しでも何かの参考になれば嬉しいです。 ワイヤーフレームとは 簡単に言えば「何を・どこに・どのように」が記載された「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、お客様や制作者と認識を合わせるためのものです。 例えば家を建てるとき、設計図面がないと大工さんはパニックになりますよね。きっと。大工さんみんなの認識が
Webサイト設計図 - ワイヤーフレームの作り方
Webサイト設計図 - ワイヤーフレームの作り方WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。 実践で学ぶ Web サイト制作ガイド：その 3目標：わかりやすいワイヤーフレームを作成することができる必要なもの：紙とペン対象レベル：超初心者 OK！目次誰のため？何のため？Web サイトを作り始める前に。Web サイトの構成図を簡単に作れる便利ツールWeb サイト設計図 - ワイヤーフレームの作り方 ← 今ここPhotoshop で Web サイトのデザインをしようP
UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ
TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA（情報アーキテクチャ） １．基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof
「細かいサイト改善」で成果を出すための仕組みとは？ CHINTAI社の細かいA/Bテスト事例(後編) - Kaizen Platform Blog
「細かい改善を積み重ね、成果を出す」ためにはどのような工夫・仕組みが必要か、2つの事例を紹介した前回の記事に続き、今回はその仕組みに焦点をあてていきます。 前回同様、株式会社CHINTAIの宮川様、安東様にご協力頂き、具体的な仕組みや考え方について詳しくお話頂きました。 案出しのやり方や、細かい改善で成果を出すためのポイントなどは必見です！ テスト実行までに時間をかけすぎない ユーザーさんが多く通る場所に絞って改善する 細かい改善を実行する上で注意したい点は、「改善場所の選定や改善案の作成に時間をかけすぎない」こと。 CHINTAI社では改善する場所を”多くのユーザーさんが通る場所に絞る”ことで、改善点の選定に余計な時間を書けないように気をつけています。 参考事例のキャプチャを共有してナレッジを貯める 同業他社さんだけでなく、例えば保険やEコマースなど他業界のサイトからも積極的に学ぶように
マルチプレイヤーゲームのレベルデザインの基礎を誰にでも理解できるように説明するとこうなる
レベルデザインとはゲーム開発における作業の1つで、ゲーム中に登場するエリアの空間を設計したり、障害物やアイテムを配置したりして、プレイヤーが楽しめるステージを作成することです。ゲーム開発に携わっていない人にとっては取っつきにくそうなレベルデザインですが、レベルデザイナーのBobby RossさんがFPSやTPSなどのシューティングゲームにおけるレベルデザインの基礎を公式ブログで公開しており、わかりやすい内容になっています。 The Visual Guide for Multiplayer Level Design — Level Art+Design Portfolio http://bobbyross.com/blog/2014/6/29/the-visual-guide-for-multiplayer-level-design ◆01：デザインに考慮すべき要素 プレイヤーの行動はレベル
チャートやグラフを飛躍的に分かりやすくするシンプルなポイント10個
情報を可視化すると人に伝わりやすく、また強く印象に残すことも可能です。そのためプレゼンテーションにおけるチャートやグラフは非常に重要になってきますが、一歩間違えば情報を分かりにくく、最悪の場合、間違った理解を見ている人に与えてしまいます。そこで、HubSpotがチャートやグラフのデザインなどプレゼン資料を飛躍的に見やすくするポイント10個を公開しています。 Why Most People's Charts & Graphs Look Like Crap http://blog.hubspot.com/marketing/data-visualization-mistakes Why Most People's Charts and Graphs Look Like Crap http://visage.co/peoples-charts-graphs-look-like-crap/ ◆01
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
せっかく入力フォームまでたどりついたユーザーの約50％が、目的達成に至らず離脱していることが分かります。 広告がネット上での集客なら、入力フォームは接客の一部です。 コンビニでお菓子を買おうとレジに並んだが、列がなかなか進まず、買うのをやめてしまうことがあるでしょう。この場合、列が早く進んでいたら、そのまま買っていたわけです。 入力フォームも同じで、欲しいものを手に持ったユーザーがレジに来ているのに、入力フォームが使いにくいというストレスのために、途中でやめてしまうことがあります。 だから、入力フォームを改善するだけで、必ず成果が上がるのです！ 3. 入力フォーム改善テクニック18選3-1. 絶対おさえる基本の9ポイント1. 項目数は最低限にする 参考：J&B Labo 上記の例では入力項目を減らしただけで、コンバージョン率が1.3倍になっています。 ユーザーの離脱理由第1位にもあったよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
standardinc.jp
Material Design
コンテンツ無しのUIギャラリー Empty States
standardinc.jp
