最新記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カラーパレットを作成するとき、みなさんはどんなツールを使っていますか？カラーパレットの作成も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

この記事は、1年半もこのメディアを運営していて初めてのunprinted編集部によるunprinted自体についてのお話です。何事もスモールスタートと考え、小さな軌道修正をしながらこのメディアを運営してきましたが、気づいたらこれまで一度もちゃんとunprintedについての話を書いたことがありませんでした。unprintedはサイトの公開から早くも1年半が経ち、今では月間10万人以上が訪れるデザインメディアとなりました。そんなタイミングで私たちはこのメディアのあり方についてあらためて考えました。

長いテキストを省略したいとき、自分でテキスト量を調整して「…」を打っていませんか？Figmaでは、自動で簡単に「…」に変換することができます！作り方はテキストエリアを選択デザインタブのテキストから「タイプの選択」を開くテキストを省略で「A…」を選択これでテキストエリアよりテキスト量が多いとき、自動で「…」で省略されます。フレームの大きさが変わったときに手動でテキスト量を調整しなくてよくなります。ちょっとした作業でも簡単にできる方法を知っておくと、デザイン作業の効率が上がりますね！

すでに公開されているWebページのデザインをFigma上で作りたいときはありませんか？ゼロから全て自分で作成するのは大変ですよね。そんなときは『Builder.io（旧HTML to Figma）』を使うと自動で簡単にWebページをFigmaファイル化することができます。使い方は、『Builder.io』のプラグインを選択Importタブを開くデザイン作成したいLPのURLを「URL to import」に入力デザインの横幅を「Viewport Width」に設定「Import to Figma

近所の松屋に行くとよくいるお客さんがいつも、「オードリーのオールナイトニッポン2024年東京ドームライブ」のTシャツを着ています。お笑いコンビ・オードリーに熱心なファンが多いことは知っていましたが、これほどかと。松屋のそのお客さんの影響もたぶんあって、最近オードリーのラジオやテレビ番組を楽しみに追いかけるようになりました。その「オードリーのオールナイトニッポン（ANN）」の放送作家であり、ショートショート作家の藤井青銅（ふじい・せいどう）さんの本『トークの教室』（河出書房新社）が面白かったので紹

「デザイナーからPdMに」というキャリアパスについて、最近よく話題に上がるようになってきました。しかし、「PdMになろう！」というような意識的なキャリアチェンジは稀で、「最近デザイナーっぽい仕事しなくなってきたけど、これってもしかしてPdM？」というような、仕事内容と責任範囲の変化によって自然とPdM化しているデザイナーが多いのではないでしょうか？デザイナーがビジネス的な領域まで見通してデザインをするようになってくると直面する、「私の仕事ってまだデザイナーなのかな？」という疑問。このような疑問を