最新記事

新しい環境に身を置く際、自身の仕事の進め方が周囲と合わなかったり、 顔合わせの度に自己紹介を繰り返したりとストレスを感じる方も多いかもしれません。 スキマバイトアプリ「タイミー」でプロダクトデザインのマネージャーとしてご活躍中の横田泰広さんは、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） ## 波の

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

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

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

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では、自動で簡単に「…」に変換することができます！ 作り方は 1. テキストエリアを選択 2. デザインタブのテキストから「タイプの選択」を開く 3. テキストを省略で「A…」を選択 これでテキストエリアよりテキスト量が多いとき、自動で「…」で省略されます。 フレームの大きさが変わったときに手動でテキスト量を調整しなくてよくなります。 ちょっとした作業でも簡単にできる方法を知っておく

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

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

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

Figmaのコメントを確認すると、どの部分にコメントがついているのかわからないことはありませんか？ そんなときは、範囲指定してコメントをつけましょう。 使い方は、 1. 左上のツールバーからコメントを選択 2. コメントしたいエリアをドラックする これで修正点などをより正確に伝えることができますね！