コーヒー屋を開業するにあたって作った書体の話｜Koji Kimura
デザインスタジオであるSTARRYWORKS inc.は、昨年秋からロースター・カフェを開業しました。そのお店の名前に合わせて「Hue」という欧文書体を開発することになった、そのプロセスや開発の裏側を紹介したいと思います。 1. お店のコンセプトは「色で選ぶコーヒー」お店の名前は「Hue Coffee Roaster」といいます。「Hue」（ヒュー）は色相や色味という意味の英語で、コーヒーのメニュー名を産地や豆の品種、焙煎度合などではなく、「色」の名前で表現することでより気軽にさまざまなコーヒーを楽しんでいただくことをコンセプトとしています。 お店のInstagram 私はコーヒーが好きで毎日飲みますが、豆の品種や産地などは詳しくなく覚えられずにいました。以前注文したものが美味しかったからまた飲みたいと思ったり、前回とは違うものに挑戦してみたいと思っても、ややこしい地名などで覚えられず、う
【53本】バナーデザインレビュー＆ブラッシュアップまとめ｜カトウヒカル
僕が運営＆講師を務めているWebデザイン1on1レッスンチャンネルのバナーデザインレビュー＆ブラッシュアップがたくさん増えたので、まとめて「53本」ご紹介します。 画像の左側が生徒さん／右側が僕のブラッシュアップです。 約1年半ほぼ毎週授業を行いました。時系列に紹介しているので、生徒さんの上達が伝わってくると思います。 【１】春の新生活応援キャンペーンバナー ■春の新生活応援キャンペーン URL：https://1on1.design/contents/96 【２】学習塾の冬期講習会キャンペーンバナー ■学習塾の冬期講習会キャンペーンバナー URL：https://1on1.design/contents/95 【３】時計店の福袋キャンペーンバナー ■時計店の福袋キャンペーンバナー URL：https://1on1.design/contents/51 【４】化粧品の継続広告バナー ■化粧
市場価値急騰の希少人材。なぜ優れたデザイナーが経営に求められるのか｜就活サイト【ONE CAREER】
「高年収を得たいなら、外資系か大企業」。近年、そのイメージは変わりつつある。 その最たる例が、スタートアップの待遇向上だ。「大企業とスタートアップの年収差が縮まった」という新聞報道があったように、スタートアップで年収や市場価値を高めることが現実的な選択肢となっている。 では、新卒の学生が今から市場価値を高めるなら、どのような職種がいいのか。今回はこのテーマを深掘りすべく、3人の経営者をお招きした。法人向けバックオフィスSaaSを提供するマネーフォワード取締役執行役員の竹田正信氏、社内ナレッジの共有・活用を支援する企業向けサービスを開発するナレッジワークを創業した麻野耕司氏、デザイン会社として初の上場を果たしたグッドパッチ代表取締役社長CEO（最高経営責任者）の土屋尚史氏だ。 3人の共通見解は「経営陣と話せるデザイナーが不足している」ということ。デザイナーと聞くと「絵を描く仕事」とイメージし
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
Figmaにおけるコンポーネントとバージョンの管理について考える｜Nao Komura｜note
まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変わってくるように思います。 そもそもコンポーネントという概念が開発にほぼ必要ない普通のWebサイトなどであれば、多少実装しにくいと思われるかもしれませんが、あまりデザイナー側が気にする事ではないかなとも思います。 ただ、今回はReact.jsやVue.jsなどのフレームワークを使ったWebアプリケーション/サービス、また
Webアクセシビリティガイドラインのコントラスト比について色相環を使って視覚化してみた。｜brightflavor@育休中Webデザイナー×グラフィックレコーダー
2-PCCS色相環の各色を背景色にした時、レベルAA達成になる色合いは？さて、コントラスト比は4.5:1で作るのがベストと改めて確認できたので、ここから色の勉強や色彩検定などで必ず出てくる色相環をベースに作ってみることにします。 ■前提として ・「PCCS色相環」の24色のカラーコードを基準色として利用。 ※RGB値（16進数）のコードは下記サイトより。 ・文字は白（#FFFFFF）。 ・色相環24色を背景色とし、HSVの「明度」を変化させ、どこまで明度を落とすとレベルAA（コントラスト比 4.5:1）達成になるかをみる。 ・測定に使用したアプリは「カラー・コントラスト・アナライザー」 結果、こうなりました。 色相環で表すとこんな感じに。 こうしてみると、レベルAA達成の時点でダーク寄りの色合いになってしまうのが、よくわかると思います。特に、朱色（v4）から緑（v12）のあたりまでの色は、
サンセリフの基本的な知識と種類を交えてオススメ書体をご紹介 ｜ デザインポケット
デザインポケットでは、およそ2万アイテムの欧文書体を取り揃えています。 欧文書体はデザイン上の単なる飾り、という時代はとっくに終わっており、今は海外に向けて日本の製品やサービスを発信する時代です。本特集ではデザイナーなら知っておきたい定番の欧文フォントの中から、特に人気の高い「サンセリフ体」に絞って、いわゆる古典的なサンセリフ体だけでなく、新しいものも交えて紹介します。 より分かりやすく、選ぶ・買うのに必要な情報もほどほどに端折りながら解説します。 サンセリフ体（Sans-serif typeface）とは？ “sans”はフランス語で「無い」の意味。つまりsans-serifは、セリフがサンなフォントのこと。 セリフ体・ローマン体 (serif typeface・roman typeface) とは違って、小説などの長文には向いていませんが、簡単な字形のため視認性が高く悪条件でも読みやす
デザインの方向性の合意 ｜ Tips Note by TAM
デザインの方向性の合意を取らずにサイトの制作を進めてしまうと、「イメージと違う」といった問題に繋がりやすく、プロジェクトの進行に影響が出てしまいます。合意を取ってからデザインに入ることで方向性のズレが生じにくくなります。 実際にどうやってデザインの方向性を決めているのかをご紹介できればと思います。 「何のために作るのか」「どう表現するのか」を知るためにはヒアリングが最も効果的だと考えています。 「どう表現するのか」って何だか曖昧ですよね。プロジェクトを進行する時、複数の人が関わっている場合が多く、「かわいい」というキーワードでも人によって思い描くイメージは様々です。 ヒアリングで導き出したサイトイメージ（トーン&マナー）を資料化することで、クライアントやチーム内で、共通認識を図ることができます。 デザインのヒアリング まずはクライアントを知ることが大事です。制作するものが商品のブランドサイ
丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン | Spinners Inc.
こんにちは、Spinners の元山 (@kudakurage) です。 最近はresize.fmという緩めのデザイン系ポッドキャストを @dex1t と始めて、オーディオ系のデバイスや仕組みについて勉強する毎日です。今のポッドキャストの収録環境についても近々書き残しておこうと思っています。 2021年1月に日本で話題になった音声SNS「Clubhouse」についてresize.fmでも取り上げて話したのですが、その中でも話しているスーパー楕円というものについて今回は詳しく書いていこうと思います。 INDEXピート・ハインのスーパー楕円スーパー楕円とデザイン建築や家具のデザインデジタルプロダクトのデザインスーパー楕円を利用した印鑑スーパー楕円の描き方数式を使った描き方（Adobe Illustrator）簡易的な描き方（Vector Draw Tool）ピート・ハインのスーパー楕円 Sou
DarkModeのデザインを中心とした色彩設計の考え方 | Spinners Inc.
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 https://peaks.cc/kudakurage/ui_design 概要WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく
React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
UXにおけるビジュアルデザインの5つの原則
スケール、視覚的な階層、バランス、コントラスト、ゲシュタルトの原則を正しく適用すれば、美しいデザインを生み出せるだけでなく、ユーザビリティも向上させられる。 5 Principles of Visual Design in UX by Kelley Gordon on March 1, 2020 日本語版2020年12月17日公開 ビジュアルを見たとき、我々はそれが魅力的か不愉快かを、通常、すぐに判断できる（なぜならば、こうした判断は、Don Normanのエモーショナルデザインのモデルでいうところの、本能レベルで展開されることが多いからだ）。しかしながら、レイアウトが視覚的に魅力的である理由を言語化できる人はほとんどいない。だが、優れたビジュアルデザインの原則をグラフィックに活かすことで、エンゲージメントを促進し、ユーザビリティを向上させることは可能である。 ビジュアルデザインの原則は、
【練習内容公開】イラストを100日練習しました｜燕禅
イラストレーションの練習を100日やりました．知らないことばかりだったので勉強していてとても楽しかったです！ いいタグがあったので記念として初日に描いたものと並べておきます#進化してたらRT見た人もする#画力変化ビフォーアフター pic.twitter.com/WKhBvyZSoi — 都路 燕禅 (@enzen3852) November 29, 2020 イラストの練習を始めてトータル100日を突破しました．一旦立ち止まって初日のイラストと今のイラストを比べてみると，見違えるほど上達できたかなと思っています． そこで今回はこの記事で，私が100日でどんな練習を行い，どんな変化を遂げていったかを振り返ってみようと思います． (追記: 60日目と70日目のイラストの削除について。着物や扇子などの模様は、自分の手元や実家にある実物の写真・インターネットの写真などを複数参考にして、いずれのデザ
Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—｜Goodpatch Blog グッドパッチブログ
Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採
iPhone 12系統のレスポンシブ対応のメモ書き
今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。 12 Pro Max 👉 428px (3x) PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。 12 / 12 Pro 👉 390px (3x) 6〜8、Xや11 Proの375pxよりも15px広い。 12 mini 👉 360px (3x) ただし、miniの場合は375pxで描写してスケーリング表示するらしい？ とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。 横幅360pxでしっかり表示されていることは必須条件です。 追記1：これからも4インチ(320px)を意識する必要はあるのか？ 個人的見解ですが、あります。 理由としてはiPadのSlide Over
これだけは知っておきたい！ロゴデザインのトレンド、テクニック15個総まとめ【2019年版】
この記事では、2019年に押さえておきたいロゴデザインの傾向やトレンドを、分かりやすいサンプル例と一緒に紹介しています。 この報告レポート2019 Logo Trend Reportは、LogoLoungeのBill Gardnerにより、過去17年間で世界中のデザイナー2万人以上が作成した、30万個を超えるロゴデザインを慎重に分析し、2019年のトレンドの要因となっているサンプル例を厳選してまとめています。 2019年のロゴデザインの傾向は？ 2019年のロゴデザインのトレンドは、まず全体を通して「良い、Good」デザインが多いこと。 これまで続いてきたトレンドにさらに磨きをかけ、新しいデザインへと変化。 昨年より引き続きグラデーションが人気。赤と緑色を組み合わせたり、青からオレンジ色、Instagramのようなオレンジ色からマゼンタ、むらさき色など伝統にとらわれないカラーリングを採用す
縦と横でつながるデザイン組織｜セルジオ / マネーフォワードCDO
皆さんの会社ではどのようにデザインを行っていますでしょうか？どのような体制でしょうか？事業の内容や会社の規模によってその形は様々かと思います。ここではマネーフォワードのデザイン組織についてご紹介します。 集権型と分権型一般的に事業会社のデザイン体制は集権型、分権型の大きく2つのパターンに分かれます。 集権型とは、事業部と並列するようにデザイン部門を設置する方法で、デザイナーはセントラルなグループに所属し、プロジェクトごとに各事業部に派遣される形になります。デザインの方向性を全社的に統一しやすいというメリットがあります。 一方の分権型は各事業部の中にデザイン部門を設置する方法で、各デザイナーは専属的にデザインを行います。デザイナーが事業に対する解像度を高めやすい、ビジネスサイドやエンジニアとの連携がスムーズになるといったメリットがあります。マネーフォワードのデザイン組織は、この分権型をベース
Figmaのガイドラインを作りました｜Shinya
デザイナーとしての仕事とはちょっと違いますが、1人目のデザイナーとして2人目以降のデザイナーの為に、Figmaの運用ルールを考え、ガイドラインを作りました。 なぜガイドラインを作ったのか 1人デザイナーとしてやってきたので、Figmaも自分自身のルールで運用していました。 しかしいずれ2人目のデザイナーが入るので、自分だけ分かるルールでFigmaを運用し続けていくことは、不可能でした。 その為、今後Figmaを決まったルールで運用していく為に、ガイドラインを作ることとしました。 課題を整理する2人目のデザイナーの為だけだと、現在直面している課題を解決する事にはならないので、まず現状Figmaのガイドラインがない事によって、発生している課題を洗い出しました。 作るガイドラインは、この課題を解決する事を軸として考え、設計していきました。 直面している課題 ・デザイナーとエンジニアで見ているデザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
EXPERIENCE JAPAN PICTOGRAMS
How to Run a Successful Design Review | UX Booth