最新記事

実装可能なデザインがわからない… 実は難易度が高い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

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」をクリック オプションでは

「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. コメントしたいエリアをドラックする これで修正点などをより正確に伝えることができますね！

去年末に突如発表されたFigma専用のカスタムキーボード『Figma Creator Micro』。Figmaの公式サイトからプレオーダーしていたものが先日やっと届きました。 モノとして楽しめるプロダクトって、所有感が満たされてワクワクしますよね。それが自分の仕事に関わるものだと尚更。ただ、デジタルデザインに携わっているとさまざまなソフトウェアに触れる機会はあっても、物理的に仕事に取り入れられるハードウェアは少ないです。 そんな中登場した『Figma Creator Micr

チップ・キッドによる『判断のデザイン』（原題「Judge This」／朝日出版社）は示唆に富んだ一冊です。チップ・キッド（Chip KIDD）はニューヨーク在住のデザイナーで、オリヴァー・サックス、マイケル・クライトン、村上春樹の小説など数々の書籍の装丁を担当してきました。人の第一印象をどう印象づけるかを明快な基準で考える、この本のコンセプトはブックデザイン以外にも参考になるはずです。 ## 第一印象がすべて 「第一印象がすべて」とキッドは言います。『判断のデザイン』では本の

Figmaでオブジェクトや画像の比率を揃えるのに手元で計算してませんか？ちょっとした作業ですが、何度も繰り返すのは手間ですよね。 そんなときは、プラグイン『Aspect Ratio』を使うと簡単に比率調整が可能です（同じ名前のプラグインが複数あるので、注意してください）。 使い方は、 1. オブジェクトを作成または画像を挿入 2. 『Aspect Ratio』のプラグインを選択 3. 比率を変更したいオブジェクトまたは画像を選択 4. WidthまたはHeightのうち、値が

SNS、買い物、ゲーム、暇つぶし……もはや生活に欠かせないスマホ(スマートフォン)。歩きスマホをする人を見ると、現代人の身体の一部と化したようにも思えてきます。 一方で「スマホから離れたい」とも思いませんか？ 少なくとも私はそうでした（今もそうです）。 作業に集中したいのにブラウザでまとめサイトを見てしまったり、読書したいのにInstagramのフィードを無限にスクロールしてしまったり……。 私は思いきってスマホ（iPhone）をやめて、ガラケーに戻してみました。そのお話をし

みなさんは、AARRRをご存知でしょうか？AARRRモデルは、主にグロースハックの文脈で事業成長を目指すために取り入れられるフレームワークですが、特にBtoCのアプリやWebサービスの改善ととても相性が良く、デザイナーとしても多くのプロダクト改善に取り入れることができるものとなっています。 今回は、特に取り入れやすい「Activation（ユーザー活性化）」フェーズの改善に注目して、具体的な施策とともにデザイン改善がビジネスに与えるインパクトを含めて見ていきたいと思います。