最新記事

みなさんは週末、何をしていますか？最近はとにかく暑くて、せっかくの週末に何もやる気が起きなかったり、リフレッシュのために出かけてみても逆に疲れてしまったり…そしてやってくる月曜日には、もう一週間乗り切れる自信がなくなってしまう。 ## 優雅なルーティンではなくてもOK！ Sunday Reset Routineとは？ 海外のYouTube動画などで人気の「Sunday Reset Routine」は、準備と体を休めるリラックスタイムをルーティーンとしてまとめたもの。日曜日の1

2013年10月にサービスを開始し、1,600万ダウンロードを突破しているZOZOのファッションコーディネートアプリ「WEAR」。2024年5月にはファッションに特化したAIを活用してリニューアル、「好みのジャンル傾向」がわかるファッションジャンル診断や画面上でさまざまなメイクを試せる「WEARお試しメイク」などを新たに提供開始している。 インフルエンサーをはじめ、一般ユーザーもファッションコーディネートやメイク画像を投稿でき、能動的に楽しめるコンテンツが充実している。本記事

突然ですが、皆さんは自分の仕事を周りに何と説明していますか？ 〇〇デザイナーといった職種名は”何をデザインするのか”というデザインの対象に視点を置いたものとなっているものの、デザインの対象や責任範囲がえてして横断的であるデジタルデザイン界隈では、これらの職種名が正確な職責を反映しているケースは少ないのではないでしょうか？ 結局、これらの職種を名乗る者も、募集する企業もそれぞれの事情で便宜的に使い分けているケースが多いと思います。 思い切って「デザイナーです」とまとめてしまうの

Figmaには複数の要素をまとめる方法に「グループ」と「フレーム」が存在します。今回解説するオートレイアウトは、「フレーム」の中の要素を整列させたり、配置・間隔を自動で調整する機能です。 使いこなせるととても便利な機能なので、まずは基本から習得しましょう！ 最初に、オートレイアウトの適用方法を説明します。 適用の仕方は、 1. 複数の要素を選択 2. 右メニューから「オートレイアウト」を選択（shift+A） 次に、要素の間隔、周りの余白（パディング）を指定する方法を説明しま

コンテンツ配信サービスにおいて、「人気ランキング」は必須の機能でもあるかのように多くのサービスで取り入れられています。もちろん、ランキングはユーザーにとってコンテンツ選びの重要な指針となる上、サービス運営視点でも効率的なレコメンデーション手法であることは確かです。 一方で、ランキングのような数値的な人気指標を取り入れないという方針を持ったnoteのようなサービスも存在します。これは数値的な人気指標の弊害を強く認識しているからこその選択でしょう。しかし、数値的に表現できる"人気

「実存しないアプリのデザインをして何の意味があるの？」 これはデザインSNSのDribbble全盛期によく見かけた批判です。かつてDribbbleは、特にデジタルプロダクトデザインの分野でデザイナーたちが自身のデザイン表現やインタラクションのアイデア、プロトタイプを発信する場として人気を集め、デザイナーが好意的なコメントでお互いの活動を称え合う、居心地の良いコミュニティーでした。 投稿されるデザインはバスケットボールをモチーフとしたサービスコンセプトに合わせて「Shot」と呼

Figmaでデザインをした際に、画面遷移図を作成したい時はありませんか？ そんなときは、プラグイン「Autoflow」を使うと簡単に作成が可能です。 使い方は、 1. オブジェクトを作成 2. Autoflowのプラグインを選択 3. Shiftを押しながら矢印の始点→終点の順でオブジェクトを選択 また、プラグインで矢印の太さなどの調整や説明テキストを追加することが可能です。 ちなみに、プラグインを使わなくてもFigJamから矢印をコピー&ペーストしてフローチャートを作ること

2024年9月1日で、設立3年を迎えたデジタル庁。「誰一人取り残されない、人にやさしいデジタル社会の実現」を目指し、「Visit Japan Web」「ワクチン接種証明書アプリ」「マイナポータル」などの行政サービスを手がける。 今回話を聞くのは、金成奎（きん・せいけい）さん。デジタルサービスのデザインやユーザー体験の設計に携わるプロダクトデザイナーだ。30歳からデザイナーとして歩み始め、民間企業でビジュアルデザインやアートディレクションを手がけていた金さんは、なぜデジタル庁に

Figmaでコンポーネントを解除したい時やインスタンスをフレーム化して編集したい時はありませんか？ 実はコンポーネントを直接解除する方法はありません。しかし間接的に解除することはできるため、本記事ではその方法を解説します。 コンポーネントには、マスターコンポーネントとインスタンスが存在します。マスターコンポーネント（Master Component）：スタイルを編集・変更できるインスタンス（Instance）： マスターコンポーネントのスタイルが自動で同期される（スタイルを上

Figmaでテキストを縦書きにしたい時はありませんか？ 本記事では、テキストを縦書きにする方法を解説します。 1. フォントは日本語フォントを使用 2. フォントサイズ（Font Size）とテキストオブジェクトの幅（Width）と行間（Line height）を同じ大きさにする 3. テキストのオプション> 詳細設定からVertical alternatesにチェックをつける テキストを縦にするだけでは長音符（ー）や句点・句読点（、。）などが横書きの方向になってしまいますが

2000年にフィンランドで創業したテクノロジーコンサルティングファームReaktor（リアクター）。その日本支社として2014年に誕生したのが、Reaktor Japanです。 同社では、フィンランド本社で導入しているアジャイル開発や自律性の高い組織体制をベースに、日本の商習慣にフィットするようアレンジして日本市場のクライアントへの提供価値最大化を推進すると同時に、社員の「働きがい」を追求。2024年には、世界最大級の意識調査機関であるGreat Place To Work®

Figmaでデザインする際にグループとフレームの使い分けに迷ったことはありませんか？ 本記事ではそれらの大きな違いと使い分けのポイントを解説します。 グループとフレームの使い分けについて、Figmaの公式記事では以下のように記されています。 次の場合にグループを使用します:複数のオブジェクトを1つの管理可能なレイヤーにまとめたい拡大縮小しても固定関係が維持される要素をグループ化したい場合（例：複数の図形で構成されたロゴやシンボル）グループ内のオブジェクトのサイズを変えたときに

Figmaのプロトタイプでカルーセルを作成するときなど、横スクロールさせたいときはありませんか？ 今回は横スクロールの設定方法を簡単に紹介します。 1. 横スクロールさせたい要素をフレーム化 2. フレームをスクロールさせたい範囲に調整する 3. プロトタイプ > スクロールの動作 > オーバーフローにて水平を選択 4. プロトタイプで挙動を確認 フレームではなくグループ化をしてしまうと、大きさを調整する際に中の要素も一緒に拡大縮小してしまうので間違えないように注意しましょう

「Meta」でプロダクトデザイナーとして7年間務めたのち、現在は自動運転技術の開発を行う「Applied Intuition」にてデザインマネージャーとして働くRıza Selçuk Saydamさんに、T型デザイナーとしての自身のキャリアについて伺いました。インド農村部でのフィールドワークから生まれたMessengerの機能驚くほどボトムアップなMetaのカルチャーデザイナーがプロダクトの収益に関する視点を持つこと など、興味深いご経験とご自身の視点についてお話しいただいて

世界で活躍するデザイナーの仕事の裏側が知れるNetflix番組「アート・オブ・デザイン」。シーズン2に登場する、イアン・スパルターは2016年にInstagramのアイコンをリデザインしたことで知られています。その後Instagramは写真を投稿するアプリにとどまらず、月間14億人以上が利用する巨大SNS、人々の自己表現の場となりました。 イアン・スパルターはInstagramのアプリのUX・UI、アイコンのリデザインのあと、現在はMetaの日本支部でメタバースデザインディレ

生成AIはUXデザイナーにとってどんな存在たりうるのか？ 今回はAI戦略や体験設計も担当するエクスペリエンス・デザイナー・川村将太（しょーてぃー）さんに、「生成AIとデザイン業界」についてインタビューし、デザイン業界への生成AIの影響や向き合い方についてお話を伺いました。 デザイナーの集まるコミュニティ「Designer's HYGGE」の運営にも携わっている川村さん。こちらの記事では「デザイナーとコミュニティ」についてたっぷりお話いただいてます。 ## デザイン業界での生成

Figmaでデザインする際、コンテンツの横幅を揃えたり配置を整える基準が欲しい時がありますよね。その際に活用すると良いのがレイアウトグリッドです。 レイアウトグリッドは3つの要素で構成されています。 赤：Column（カラム：列）緑：Margin（マージン：余白）青：Gutter（ガター：溝） 設定方法は 1. レイアウトグリッドの「＋」をクリック 2. グリッドを編集 3. 列を選択 4. カラムの数、余白、ガターを設定 また、レイアウトグリッドはグリッドスタイルとして保存

前身のウェブ制作会社「レターズ」を経て、2011年から活動しているデジタルデザインスタジオ「Garden Eight」。国際的にすぐれたウェブサイトを表彰するAwwwardsやFWAなど多くの受賞歴があり、業界内で注目度の高い企業の一つです。 創業当時から現在も7名と少数精鋭を貫く同社は、どのようにして国内外で評価される実績を輩出してきたのか。下北沢にあるオフィスを訪ね、CEOの野間寛貴氏にインタビューしました。 ## クリエイティブな表現に長けた少数チーム ―― 現在の運営

ナイキエアジョーダン、『The New Yorker』の表紙イラスト、Instagramのアイコン……誰もが見たことのあるデザインを手がけた名デザイナーの仕事術が見られる番組、Netflix「アート・オブ・デザイン」。 シーズン1に登場するのが、グラフィック・デザイナーでアーティストのポーラ・シェア。そのポーラ・シェアの会議術が多くのデザイナーの参考になりそうだったので紹介します。クライアント向けだけではなく、社内会議にも役立ちそうな考え方です。 ## ポーラ・シェアとは ポ

今回は、デザイナーの集まるコミュニティ「Designer's HYGGE」の運営に携わる川村将太さんに、「デザイナーとコミュニティ」についてお話を伺いました。デザイナーにとってコミュニティは必要なのか？ 参加するための課題とは？ たっぷりお話いただいてます。 ## 「Designer's HYGGE」とは 「Designer's HYGGE」はデザイン好きが集まって会話を楽しむコミュニティ。経験や年齢は一切不問で、デザインにまつわる雑談を楽しむ集まりです。毎月末、20時からオ

新しい環境に身を置く際、自身の仕事の進め方が周囲と合わなかったり、 顔合わせの度に自己紹介を繰り返したりとストレスを感じる方も多いかもしれません。 スキマバイトアプリ「タイミー」でプロダクトデザインのマネージャーとしてご活躍中の横田泰広さんは、22項目にわたる「私の取扱説明書」を作成。コミュニケーション・態度効率化・プロセス改善過去に受けたフィードバック など、自身の仕事に対する姿勢や進め方などをまとめています。「取扱説明書」を開示することによる反響は？ なぜ「取扱説明書」の

Figmaで作成したページをグルーピングして管理したいときはありませんか？ そんなときは、区切り線（Divider）を使うと便利です。 使い方は、 1. Pagesセクションの「＋」を押してページを作成 2. ページ名に「」または「***」を入力 これによって空ページを区切り線（Divider）に変換することができます。 ただし、ページ内にオブジェクトがある場合は区切り線に変換されないので注意してください。 また、右クリックで区切り線（Divider）の複製と削除をすることが

Figmaでデザインするときに、FigmaのデザインファイルやFigJamを確認しながら作業したいときはありませんか？ そんなときは、2画面表示を活用しましょう！ ## 同じファイルを2画面表示したい場合 使い方は、 1. タブを右クリック 2. 「分割タブで開く」を選択 ## 異なるファイルを2画面表示したい場合 使い方は、 1. 分割表示したいファイルを開く 2. どちらかのタブをドラッグすると画面半分が薄紫になる 3. ファイルを開きたい方にドロップする 2画面表示を解

実装可能なデザインがわからない… 実は難易度が高いHTMLメールのコーディング GmailやOutlookをはじめとした無数のメーラーの挙動の違いや、Webブラウザとは異なるCSSの制約など、実はHTMLメールの実装には多くの知見を要します。例えばレイアウトにはFlexboxを使用できずテーブルタグを使う必要があるなど、Webサービスの実装方法と大きく異なるメールのコーディングは多くのエンジニアを悩ませます。 一方でデザイナーの立場からすると、メールのデザインはユーザー体験の