Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの

Neumorphism（ニューモーフィズム）は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。 この記事では、ニューモーフィズムの基本や作成上の注意点、コピペで実装できるHTML/CSSスタイリング、参考スニペットまでまとめてご紹介します。 ニューモーフィズムって何？ ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイル。言葉の由来も、New（新しい）＋Skeumorphism（スキューモーフィズム）からきた造語。 dribbbleで4500以上のいいねが付いている、ニューモーフィズムの火付け役となった作品 Skeuomorph Mobile Banking by Alexander Plyuto 少し前までは、マテリアルデザインの登場によって「

初めまして！ UIデザイナーになって1年半ほど、気持ちはいつでもフレッシュな粒木です。 業務を行うかたわら、最近インプットが足りないかも、仕事以外でも何か作りたいな〜と悶々としていましたが、 それを解決するために、しばらく前から「Cocoda!」というものを始めてみました。 今回はそのCocoda!について、 サービスの概要から実践例、続けるコツなどを粒木の実体験に基づいてご紹介します。 Cocoda!とは？ Cocoda!とは、UIが学べる無料の学習サービスです。 お題に沿ってデザインを作り、実際に手を動かしながらUIデザインのスキルを身につけられます。 「UIデザイナーになりたいけれど、何から始めたらいいのかわからない」 という初心者の方にはもちろん、 「自分のデザインスキルを高めたい」「ポートフォリオを充実させたい」 と思っている中級以上の方にもおすすめです。 どんなお題があるの？

女性やママ向けのWEBデザインスクールをまとめてみました。 主婦の方は時間的制約＆場所的な制約もあるため安く、オンライン受講が可能な通信講座にも言及しています。 中でも評判の良いWEBデザインスクールを６つ紹介します。 女性・主婦向けWEBデザインスクール選び方のポイント 通学・オンライン・複合 お酒を飲んだ帰り道で、独学のおじさんと目が合いました。 できるってこういうところにもいるんだなぁと思いながら、Webの話すことを聞いていたら、けっこう思い当たるふしがあったので、学習をお願いしてみようという気になりました。 大学生というものの相場は分かりません。 聞いたらそんなに高くなかったので、できるでずっとモヤモヤしていたのも手伝ったのだろうと思います。 TechAcademyについては私が話す前から教えてくれましたし、挫折に対するアドバイスも貰えて、ホッとしました。 大学生は根拠のないおみく

THE GUILDの安藤剛さんがTwitterでNetflixのUXライティングに関する記事をシェアされていたのですが、事業会社でUXライティングに取り組んでいるわたしにとって非常に参考になりました。 UXライティングを深堀りしたくなり、Netflixの事例を漁ってみた。 サインアップファネルにおいて、どのようなコミュニケーションでユーザーの心理的負担を下げているかの考察。 スレッドで解説します👇https://t.co/hpZcm7cNWF — Go Ando / THE GUILD (@goando) March 2, 2020 彼らがサインアップで強調しているメッセージは4つ 1.いつでもキャンセル可能 2.初月は無料 3.有料化3日前にお知らせ 4.どのデバイスでも利用可 このメッセージを何度も繰り返し目に入るようにしている。 初月無料に至っては13回 そしてプレーンテキストでは

突然ですが、「UI Stack」ってご存知ですか？ アメリカのプロダクトデザイナー Scott Hurff さんが3年ほど前に世に出した考え方で、考慮すべき UI の5つの側面を示したものです。 当時「これは使える！」と思って社内向けに作った勉強会資料を見つけて、今でもやっぱりすごく大事だと思ったので、備忘録的に書いておきます。 ちなみに元記事はこちら。（英語です） UI Stack とは？Stackとは、1つの画面が持つ（複数の）側面、状態、ステータスのようなもの。その側面ごとに最適化されたUIを設計しようするのが UI Stack の考えです。 Scottさんが紹介しているUI Stackは5つ。 ※図はScottさんのページから引用 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error

一昨日の深夜23時ぐらいにLINEのデザイナーインターン募集見つけて「24時間で画面設計だ！」とか思っててほとんどできてたのに、昼起きたら提出期限切れて死にたい。 pic.twitter.com/f1RQhlUt3A — Shunsuke Takagi｜高木俊輔 (@takagi_1129) February 28, 2020 TL;DR（はじめに） この記事はどういったもの？：LINEのUIデザイナー向け夏季インターンの締め切り日に間に合わなかった（起きたら過ぎていた）けど、せっかくちゃんと画面を作ったので”リデザイン”の過程を公開する 誰のために？：デザイナー・プロジェクトマネージャー・デザインに興味がある人・私（フィードバックください！） ・・・ はじめまして！ 私はネットで授業が受けられる「N高」というところで高校生をしながら、非大卒を対象としたヤンキーインターンなどの事業を行って

前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!ニュース デザイナーの広垣です。 11月上旬、Yahoo!ニュースアプリはダークモードをリリースしました。※Android10（Q）以上/iOS13以上 Yahoo!ニュースアプリがダークモードに対応しました- newsHACK 昨日はエンジニアからYahoo!乗換案内アプリの事例を元に実装面について解説がありました。 本日はデザイナー視点からYahoo!ニュースでの事例を元にダークモード対応事情をご紹介したいと思います。 【補足】 画面を暗めの配色に切り替える機能について、「ダークモード」「ダークテーマ」などさまざまな呼び方がありますが、この記事では中ではすべて「ダークモード」と呼んでいます。 また、「ダークモードで

ChintanはYourUXTeamのファウンダー/チーフデザイナーです。YourUXTeamはスタートアップやソフトウェア会社、デザインファームなどと協業し、ユーザーテスト全体の設計やUXデザイン・UIデザインなどを手掛ける会社です。 この記事のタイトルを見たとき、「心理学がどうUXデザインと関係するのか？」と思った方もいるかもしれません。 今回の問いはデザイン心理学とは何か、そしてそれがなぜより良いUXに関連するのかということです。通常のデザイン心理学は規律のとれたデザインや人間の反応や行動のことです。この記事では製品またはサービスのUXに影響を与える心理的要因について説明します。また、企業が製品のパフォーマンスを向上させるためにどのように役立つかも説明します。 ユーザー体験と心理学 UXデザインと心理学は古くから親密な関係にありました（社会的、行動的、認知的な観点で）。人間の行動のほ

この記事は CAMPHOR- Advent Calendar 2019 の12日目の記事です。11日目は p1ass さんの「Kubernetesのイメージタグの更新を楽にするCLIツールをGoで作った」でした。 こんにちは。CAMPHOR- OGのtomokortnです。CAMPHOR-は2018年に卒業しました。 なんでこの内容を書くか @marty958 からリクエストがあったので、WebやAppの配色をいい感じに決める3つの方法を書いていきたいと思います。 はじめに: 配色に悩んだときに私が見ているもの配色に限らず、デザインに悩んだときはAppleやGoogleといったプラットフォームのガイドラインを参考にしています。 その中でもGoogleのデザインガイドラインであるMaterial Designは「Build beautiful products, faster.」をファースト

先日会社で開催された Cookpad Product Kitchen #5 というデザイナーさん向けのイベントで、生まれて初めて社外の方向けに発表をさせていただきました。その時の資料をこちらで公開させていただきます。拙い発表ですが、目を通していただけたら嬉しいです。 -------☺️ここから発表内容☺️------- こんにちは。クックパッド投稿開発部、ディレクターの五味と申します。私はデザイナーのキャリアはないのですが、デザイナーさんとチームを組んで、たくさん一緒に働いてきた立場として、お話しさせていただきます。 私たちクックパッドの開発チームは、ユーザーさんに会う機会が多いです。サービス開発に関わるメンバーは、デザイナーさんもエンジニアさんも、職種問わず、積極的にインタビューに参加してもらっています。 今日はそんな私たちが、どんな風にユーザーと向き合って、またそれをプロダクトづくりに

こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで毎日投稿しています。 本記事は11月も100本ノックをする中で感じた学びの第2弾になります。 それではいってみましょう！ ①何をする画面なのかの明確化 同じ粒度の情報が多いと何をすべきかわからず面倒に。情報に差をつけて直感的に何をするか伝わる画面にする。 ■メルカリ：メルペイ画面のUI変更 ボタンが8個→4個に減りキャンペーンが目立つ位置に移動。引き算×強調のお手本にしたいデザイン。 ■AWA：曲のアクション画面のUI変更 お気に入り、ダウンロード、プレイリストの3点が明確にサイズアップ。 ②プッシュする施策は納得感を アプリ側がやって欲しいことを勝手に押し付けるのはNG。ユーザーの行動に合

「Game Graphic Design Advent Calendar 2019」の初日の記事です。 ゲーム制作に関する素敵な記事がたくさん公開されると思いますので、私自身もワクワクしてます。 言い出しっぺとして、初日としてまず何を書こうかなと思ってたんですが、以前Twitterでチラッとつぶやいた「普段ゲームUIを作るときってどういう工程があって、どういう流れで作っているか」をまとめてみたいと思います。 というのも、いろいろな方から「何から手を付けていいのか…」「デザインが上手くまとまらない」「デザイナーが社内外注みたいになってしまって…」みたいな話をよく聞きまして。 そのアンサーになるかは分かりませんが、自分の場合はこういうフローで、こういうことを意識してますよ。というのを書いてみたいと思います。 もちろん組織や人によってやり方は様々だと思いますので、こんな風にやってる人もいるんだ、

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ボタンには、押せる状態と押せない状態以外にも、ロード中という状態があります。このロード中という状態は通常数秒以内で処理されるため、ユーザーには見えません。しかし通常よりも処理に長い時間がかかる場合、ロード中の状態を見せないことはアクションエラーを誘発します。 アクションエラー もしアクションを実行するのに自分が想定したよりも長い時間がかかったら、ユーザーはシステムが自分のリクエストを実行しているのかどうかを知る必要があります。何も起こっていないように見えたとしたら、彼らは正しくボタンを押せなかったと思うでしょう。この誤解が、彼らに再度ボタンを押させてしまいます。 ユーザーが２回以上ボタンを押すと、システムの処理が増えるだけでなく、操作が二重にな