最新記事

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時からオ

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

新しい環境に身を置く際、自身の仕事の進め方が周囲と合わなかったり、 顔合わせの度に自己紹介を繰り返したりとストレスを感じる方も多いかもしれません。 スキマバイトアプリ「タイミー」でプロダクトデザインのマネージャーとしてご活躍中の横田泰広さんは、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サービスの実装方法と大きく異なるメールのコーディングは多くのエンジニアを悩ませます。 一方でデザイナーの立場からすると、メールのデザインはユーザー体験の

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

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

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

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

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

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

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

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

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