「Figmaの2022年夏〜23年夏の新機能を扱うシリーズ」、今回は開発モード編です。 この記事は、2022年に自費出版で発売した『ちょっとできる人向けFigma本』のための追加コンテンツです。 この記事単体で読んでもらえるようにもしています！ ※2023年8月末時点の変更点や新機能を扱っていますが、間違い・アップデートなどありましたらお知らせください！ 『ちょっとできる人向けFigma本』の該当箇所……p27 「開発モード」はFigmaの歴史の中でもけっこう大きな追加アップデートです。今まで「インスペクト」として存在していた機能を引き継ぎつつ、大きく機能が追加されました！ 開発モードを有効にするには、ツールバー右の「</>」アイコン状のトグルスイッチをONにしましょう。 プライマリーカラーの水色が緑になる記事の後半で言及しますが、この「開発モード」は2023年末までは追加料金無しで利用で

こんにちは。デザイナーの白木です。 前回はクラシコムのUXリサーチについてお話しましたが、今回は「北欧、暮らしの道具店」のメルマガをABテストの手法を使って改善した話をしたいと思います。 「北欧、暮らしの道具店」通常のメルマガは商品紹介がメインですが、それとは別に当店のアプリを紹介するメルマガも配信しています。 これまではメルマガ登録者全員に配信していたのですが、その中にはアプリをすでにご利用いただいている方も多くいらっしゃるため、アプリのダウンロードには繋がりにくいという課題がありました。 そこでアプリ紹介メルマガを配信する対象をメルマガの新規登録者に絞ることにしました。新規登録者は当店を知って間もない方が多いと思われるため、アプリについて知ってもらえる良い機会になると考えたからです。 内容も見直し、いくつかのパターンを配信して効果を検証してみました。 ※本来同じ期間に複数のパターンをテ

メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。

ユーザビリティというのは普遍的に重要なデザインテーマの一つですが、一方でユーザビリティへの関心は、UXが普及して以降、徐々に失われている印象があります。例えば、ユーザビリティがテーマにした書籍のほとんどは2000年代の刊行で、少なくとも日本国内において、2010年代以降に発刊された書籍は僅かです。 実際、Googleトレンドで2004年からの「ユーザビリティ」と「UXデザイン」の検索動向を比較しても、「UXデザイン」が2010年以降に増加傾向であるのに対して、「ユーザビリティ」は2000年代前半をピークに下降しています。 「UX」だと別の意図の検索を含むため、あえて「UXデザイン」で比較していますが、ここにデザイン文脈で使われる「UX」を加えると、「UX」は「ユーザビリティ」を確実に上回っているはずです。 だからといって、2010年代以降にユーザビリティが重要でなくなったわけではありません

どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

この作品は、Kyle Galle、UI8 Design、Jonathan Pimento​​​​​​​によるWiresを利用したUIキットです

僕にとって、デザインのプロセスの中でもアナログなラフ描きが欠かせません。手描きに込められた線には能動的な意思があって、それが結果的にデザインに宿ると思うからです。手描きラフに着手した途端に没入して元気さえでてきます。ああしたいこうしたいと、言葉や素材を吟味しながら「体重のせて描く」感じがいいのですよね。 そしてそのラフは、必ずとっておきます。手描きのラフは何回も書き直すので、思考とブラッシュアップの変遷が手に取るようにわかります。それをチームで共有すれば、学びの教材にもなります。 このnoteでは、僕が普段取り組んでいるラフ描きの取り組み方を紹介するとともに、一部のラフを公開したいと思います。 ラフの取り組み方 1. 消さない アナログは消すのが面倒なのでアイデアをどんどん出すことに集中できます。デジタルはすぐデリートできるので、アイデアの源泉の段階でちまちま編集をしてしまうという落とし穴

こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ

［CEDEC 2020］「星のカービィ」のUIはおもてなしの心で作られている。UIデザインが分かりやすく言語化されたセッションをレポート 編集部：御月亜希 ゲーム開発者向けカンファレンス「CEDEC 2020」の2日目（2020年9月3日），ハル研究所は「カービィUIでおもてなし！『ゲームとプレイヤーを繋ぐUI』を目指して」と題したセッションを行った。 このセッションでは，同社の人気シリーズ「星のカービィ」（以下，カービィ）において，どのようにユーザーインタフェース（UI）が作られているのかを，UIアーティストの伊藤晴香氏と，リードUIデザイナーの剣持 紫氏が紹介した。UIデザインが論理的かつ分かりやすく言語化されたセッションの内容をお伝えしていこう。 本セッションの主題となるカービィのUIとは，どのようなものなのだろうか。UIチームは，迷わないUI，ストレスや不快感を与えないUI，印象に

こんにちは、株式会社LIGでアートディレクターをしている竹原と申します。 「デザインとは情報設計」、といわれています。例えばボタンでも、アクションやレイアウトに応じてさまざまな設計をおこなっているんです。 今回は、僕が普段ボタンデザインをする際に考えてることをまとめてみました。デザイナーの方にはWebやUIのデザインをする際の考え方の参考に、デザイナー以外の方には、デザイナーって普段こんなことを考えながらデザインしているんだな、と感じていただければ幸いです。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロの現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料を

Adobe XDの理解度を自己診断してみよう！定期的にチェックしながら、スキルアップを目指せます。

Sign up for the newsletter Join 70k+ other subscribers and get the latest tutorials, resources, and articles in your inbox.

「さあ、デザインするぞ！」 そう思ってmacに向かい、デザイナーなりたてホヤホヤの1年前の私はいきなり画面のビジュアルからつくり始めました。情報設計せず、最初からワイヤー書いて、色をつけていく…。今思い返すと失神しそうです😇 デザイナーになりたての方、もしくはデザイナーになろうとしている方のなかには「デザイナーはイケてるデザインを作るのが仕事」と思っている方も一定数いるのではないでしょうか。(決して間違ってはないけどね！) でも私は今こう思っています 「良いインターフェースは見た目から始まるわけではない」と。 今回は「はじめてのUIデザイン」を参考に自分が歩んだプロセスをしっかりと文字にして残しておきたい&私の経験が誰かの役に立てたら、と思いこの記事を書いています。 さ！前置きはこれくらいにして始めよう💨 [目次] 1.「はじめてのUIデザイン」について 2.私がデザインを担当したプロ

リアルタイムで共同編集ができる新しいデザインツールとして注目を浴びる「Figma」について学べるカリキュラムです。チームでアプリやWebサービスを作っている現場におすすめ。

Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。 アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさ アイコンのリソース Clarity -アイコンは分か

前回、フリマアプリのワイヤーフレームを配ったら好評だったので再び。 よくあるコーポレートサイトのワイヤーフレームを作りました。 トップページにお知らせやバナーが貼ってあって、各ページに詳しい情報が載ってる感じ。 プレスリリースのページとか。 会社概要とか。 採用ページ モバイルもあります WordPressのテンプレート用にスクリーン名を付けていますコーポレートサイトをオリジナルで作るなら大抵WordPressでやることになるかと思います。なのでスクリーンの名称にWordPressのテンプレート作成時のファイル名を付けておきました。 採用情報ページの募集職種・オフィス環境・福利厚生あたりはカスタム投稿・カスタムフィールドを使うと良い感じにあとから管理しやすくなると思います。 ダウンロード

売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限

こんにちは、デザイナーの佐野大河@sn_taigaです。先日、クックパッドのiOSアプリで「キッチンレポート」という自分のレシピ投稿の活動の成果がわかる機能をリニューアルしました。今日はそのデザインプロセスについてお話します。 キッチンレポートとはキッチンレポートでは、自分の投稿したレシピやマイページへのアクセス数が見られる他、個々のレシピのアクセスランキングやつくれぽ（レシピを見て料理した人から届くメッセージ）などが見られます。レシピが保存された数や印刷された数もわかり 「自分のレシピが誰かの役に立っている！」という実感を持つことができます。 他にも「公開レシピが30品になりました！」や「あなたのレシピが人気順検索でトップ10入りしました！」など、自分が投稿したレシピに関する嬉しい出来事を残してくれる機能もあり、ユーザーの継続的なレシピ投稿や日々の料理のモチベーションにも繋がっています。