最新記事

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

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

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

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

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

2024年6月26、27日にサンフランシスコのMoscone Centerで開催されたFigma主催のデザインカンファレンスConfig 2024に参加し、Config 2024現地レポート速報編では現地の様子を主に紹介しました。 Configのメインコンテンツは様々なトピックについてのトークですが、これらは後からオンラインでも視聴可能なので、今回のConfigは世界中から集まるデザイナーと交流することを目的として参加しました。他にも多くの人が同じ目的で参加していたように思え

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

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

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

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

韓国ドラマを観ていると、オープニングのアニメーションやグラフィックに目が止まります。洗練されていて、毎話スキップしてしまうのがもったいなくなるほど。お隣の国で同じアジアとはいっても、日本のドラマに比べ韓国ドラマのグラフィックはかなり欧米に近く、さらに独自の表現を磨いていっているようです。背景を考察してみると、装丁や美術へのこだわり、「世界観」の徹底した抽象化の技術が見えてきました。 秀逸な韓国ドラマのオープニングアニメーション 韓国ドラマの中で、いくつか秀逸なグラフィックデザ

Figmaでデザイン作成しているときに、文字を曲線にそって配置したりシェイプを曲線に配置したいことはありませんか？ そんなときは、プラグイン『To Path』が便利です。 使い方は、 『To Path』のプラグインを選択 沿わせたいテキストと曲線を選択し「Link」をクリック ちなみに、波線や曲線を作るプラグインは以下の記事で解説しています。 『To Path』では、複数のオプションによってデザインの調整が可能です。 Vertical Align：テキストと曲線の距離（0~1

オブジェクトに対する操作を中心にユーザー体験を設計するOOUX（Object Oriented UX）と呼ばれる手法はUXデザインの世界で広く知られるようになってきたように思います。しかし、オブジェクトを意識してデザインしていても、「気づいたら途中からユーザーアクション主導の作り方になっていた」というケースもよくあります。デザイナー的な視点では「これって本当にオブジェクト化できるのだろうか？」という疑問が浮かんできたタイミングがこれに当たりそうです。 これは、OOUXの主軸と

Netflixの人気番組『クィア・アイ』。セクシャルマイノリティーの5人「ファブ5」が毎回「ヒーロー」と呼ばれる人物の内面も外見も大改造します。 ファブ5はそれぞれファッション、美容、インテリア、カルチャー、フード／ワインのプロで、ファッションならワードローブごと入れ替えたり、インテリアなら大規模リフォームが施されたり……とゴージャスな変化が楽しみな『クィア・アイ』。ファブ5が日本に来た『クィア・アイ in Japan!』、各国の別メンバーによる「ドイツ編」「ブラジル編」など

みなさんはカラーのティントとシェードの作成はどのように行なっていますか？カラーパレットツールを利用したり、自分で調整して作成している方もいらっしゃると思います。 ティント: 純色に白を混ぜた色 シェード: 純色に黒を混ぜた色 今回ご紹介するのは、Figma上で1色指定するだけで簡単にかつ数学的に複数のティントとシェードを作成してくれるプラグイン『Tints and Shades』です。 このように、指定の色（Base）を中心にティントとシェードを5パターンずつ作成してくれます

「仕事中にボーカルが強い曲を聞くと集中力が落ちてしまう」「ボーカルの無いインスト曲は探しづらい」とお悩みの方も多いのではないでしょうか？ 今回は「作業中／仕事中におすすめなインスト曲」を紹介します。ぜひ一度作業中に聴いてみてください。あなたの集中力を高める作業用 BGM が見つかるかもしれません。 iced tea / catnip, Lola アーティスト：catnip, Lola 収録アルバム：jammy 音楽サブスクを中心に活動するアーティスト catnip と Lol

Configとは？Figma主催のデザインカンファレンス 2024年6月26、27日にサンフランシスコのMoscone Centerで開催されたFigma主催のデザインカンファレンスConfig2024に現地参加してきました。 今回の速報では、前日に開催されたプレイベントと2日間のカンファレンスの様子をレポートします。 サンフランシスコ、シリコンバレーはIT産業の集積地ということもあり、Techの雰囲気を感じる街で、サンフランシスコ空港から街の中心部に向かうまでの高速道路の横

TikTokのフィードをついついスクロールしてしまうのは、ちょっとした期待が満たされることによって脳内の快楽物質ドーパミンが分泌されるからであると言われています。この小さな快楽はドーパミンヒットと呼ばれており、ここでいうヒットは麻薬やタバコの”摂取”に由来します。一度このヒットの感覚を覚えると、２回、3回と行動を繰り返してしまうのがこのドーパミンヒットの特徴です。 — でも、このドーパミンヒットをうまく利用できれば仕事にもSNSのように夢中になれるのでは？ 打鍵感に徹底的にこ

Figmaで波線や曲線を作りたいときはありませんか？ そんなときは、プラグイン『Wave & Curve』が便利です！ 使い方は、 『Wave & Curve』のプラグインを選択 複数のオプションを活用して波線を作成 「Create」をクリック 次に、設定可能なオプションについて説明します。 波の大きさの調整 左：Height（振幅:px） 中央：Height Difference（振幅の高低差のランダム性） 右：Distance（波長:px） 波の形の調整 左の3要素：波線

突然ですが、最近運動していますか？ 作家の村上春樹さんは毎朝10キロメートル走ってから数時間執筆するといいます。集中力＝体力と考えているそうで、これは腑に落ちます。運動しなくなると効率が落ちてくるように感じます。 運動は健康に良いだけではなく、脳にも良い。集中力が高まり、ストレスや不安にも効果がある。 初版は15年前ながら、ロングセラーとなっている書籍『脳を鍛えるには運動しかない！ 最新科学でわかった脳細胞の増やし方』（ジョン J. レイティ、エリック・ヘイガーマン 著／野中

ファッション誌やハイブランドのロゴとしてよく使用されていることから、高級でおしゃれなイメージがある書体「Didot（ディド）」と「Bodoni（ボドニ）」について、その成り立ちや使い分けに役立ちそうなポイントを紹介します。 同時代に生まれたDidotとBodoniのコンセプト 一見するとデザインが似ているDidotとBodoniですが、それは制作された時代背景と、表現したいコンセプトが同じであったことが理由であると考えられます。Didotはフランスで、印刷業で働いていたFir

カラーパレットを作成するとき、みなさんはどんなツールを使っていますか？カラーパレットの作成もFimga内で完結できたら便利ですよね。 そんなときは、プラグイン『Color wheel palette generator』を使うと簡単にカラーパレットを生成できます。 使い方は、 『Color wheel palette generator』のプラグインを選択 複数のオプションを活用してカラーを調整 「Generate palette」をクリック オプションでは、6種類のパレット

6月26日、Figmaによる大規模なカンファレンスイベントであるConfig 2024が開催されました。イベント冒頭のキーノートでは、同社CEOのDylan Field氏が複数の大きなプロダクトアップデートを発表。今回は、そんなキーノートの様子を発表された新機能と一緒にレポートします。 Dylan氏によると、今回のアップデート内容は、主に以下の3つのトピックに集約されるとのこと。特に、AIを活用した新機能はデザイナーの毎日の業務上の細かい悩みを解決するような素晴らしいものとな

「StoryTribe」はロンドンのStoryTribe Ltd.社が開発、2024年春に発表したアプリ。直感的に手を動かして、絵コンテやアニメーションを簡単に作れるブラウザベースのツールです。シンプルな作業で、時間をかけずにストーリーボードを作成できるのが魅力。絵を描いたりデザインしたりすることに苦手意識がある人でも、パーツを選んで組み合わせるだけなので、考えを形にする作業がスムーズ！ 作業スピードUPやコスト削減も叶いそうです。 「StoryTribe」でできること スト