優れたデザインを作るための社内コミュニケーション術とは

ユーザーにとって使いやすいデザイン(UI/UX)を生み出すためには、デザイナーのスキルだけでなく、エンジニアやディレクターとのコミュニケーションが必須です。より良い成果を出すためのコミュニケーション術を詳しく説明しています。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はLaura Klein氏によって投稿されました。

もしあなたにUXデザイナーとしての経験があれば、新規プロジェクトの立ち上げで次のような会話を耳にしたことがあるかもしれません。

「楽しくて使いやすい製品を開発したい。」
「ユーザー調査が必要だ。」
「オンボーディング（新規ユーザーを自社の製品やサービスに慣れさせるためのプロセス）を改善したい。」
「新規ユーザーのためにプログラムの誤りがないかチェックする作業を行う必要がある。」
「ペルソナ分析、Photoshopで使うモックアップ、ワイヤーフレーム、ランディングページ、追加の挿入が必要だ。」

しかし、これらの会話は全て無意味なものです。なぜなら、製品について考えるべき問題や、製品の改良方法を決定するのに直接的には役に立たないからです。

UXのプロジェクトにおいて、誰かから「これを改良してほしい。」などの曖昧な指示しか与えられないまま、具体的な成果物を求められたら、あなたは会話の方向性を変えた方がいいでしょう。

その方法として、次のような質問を投げ返すことが有効です。

「この製品や機能がターゲットとするユーザーはどのような人でしょうか？」
「ユーザーのために解決しようとしている問題は何でしょうか？」
「このプロジェクトには会社にとってどのようながニーズあるのでしょうか？」
「何についての判断基準を変えようとしているのですか？」
「このユーザーの問題を解決することが、なぜ判断基準を変えると思うのですか？」

ユーザーにとってのメリット

これらの質問は、デザインのプロジェクトを成功させるために重要な、次の3つの要素を定義するのに役立ちます。

解決するべき問題
問題を解決するべき理由
成功の判断基準

これらの3つの要素はUXデザインに不可欠なものです。これらなくしてはUXデザインは絵に描いた餅です。

デザインの目的とは、ユーザーの問題と自社のビジネスの問題を、両方とも解決することです。

もしユーザーの問題を解決すること（例として、ユーザーが必要とするものを提供したり、生活の質を向上させること）によって、自社のビジネスの問題を解決すること（例として、利益を生み、会計上の自己資本比率を上げること）ができれば、デザインの至高の目的が達成されたといえます。

これらの質問に答えを出すことが、ユーザーの必要とする製品を開発し、また自社のビジネス成功の鍵となる判断基準を改善することにつながります。

デザイナーにとってのメリット

これらの質問に答えることのデザイナーにとってのメリットは、プロジェクトを再構成することで、デザイナー自身がより自由に問題解決を行えるようになることです。

他の人から与えられた指示をそのまま実行するのではなく、判断基準をどう改善できるかを、デザイナーが自分自身で仮説から考えることができます。つまり、「オンボーディングのプロセスを変えてください。」といった指示を受ける代わりに、「新規ユーザーのための10日間のライセンス認証について、基準を再考してください。」といった指示を受けて、デザイナー自身が考えることができるのです。

さらに重要なことに、成功の判断基準が存在していれば、自分のデザインについて直接的な評価を得られるため、デザイナーとしての成長につながります。

[PR] Webデザインで副業する方法とは

エンジニアにとってのメリット

これらの質問に答えることのエンジニアにとってのメリットは、プロジェクトの範囲が定まることです。もしプロジェクトの要件定義が上手くなされていないとしたら、プロジェクトの範囲の肥大化を引き起こすおそれがあります。

つまり、解決するべき問題や成功の判断基準が定まっていないとしたら、プロジェクトの仕事の増大を引き起こしやすいのです。一方これらを明確に定めておけば、新たな作業が発生しても、直接的に問題解決に役立たないものは後回しにすることができます。

答えが思い浮かばないときには？

あなたが会話の方向性を変えようと試みても、最初は上手くいかないかもしれません。クライアント、プロダクトマネージャー、エンジニアなどに、これらの質問を繰り返し投げかけてみましょう。

もしすぐに答えを得られなくても、プロジェクトを開始する前までには、協力して答えを出しておきましょう。そうでなければ、ユーザー、会社、チーム、あなた自身にとってメリットの少ないプロジェクトになってしまうおそれがあります。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

【プロトタイプを作る！】初心者でもすぐに分かるProttの使い方

プロトタイピングツールとして有名な「Prott」の使い方について解説しています。 Prottは作業画面からサポートまで全て日本語対応のプロトタイプ作成ツー...

アプリデザイン

実際のアプリから学ぶ！UX向上のためのアニメーションの使い方

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投...

アプリデザイン

意味のあるデザインを！自然なアニメーションの作り方

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェアデベロッパーのNick Babich氏によ...

アプリデザイン

【デザインする前に知っておきたい！】よくあるUXのトラップを避ける方法とは

本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。本記事は、...

アプリデザイン

具体的な方法を学ぶ！優れたアプリのデザインプロセスとは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。「問題を解決するためには、まず最初に、問題が存在すると認...

アプリデザイン

あわせてよく読まれている記事

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。「問題を解決するためには、まず最初に、問題が存在すると認識することです。」- ジグ・ジグラー製品の問題定義は、製品開発の土台であり、ひいては製品の成功のための鍵となります。デザインに関する問題の解決策も、この問題定義を土台として導くことができるのです。つまり製品のデザインは、深い理解と定義が要されるような問題から始めるべきです。最初に何となく正しいと思える問題から、深く考えずにデザインを始めるとしたら、良い結果は期待できません。画像：「理解」→「定義」→「アイデアの形成」→「デザイン」→「テスト」の循環。UXPinからMarcin Treder氏による「デザインプロセス」より問題定義を中心としたアプリのデザインプロセスについて見ていきましょう。身近な問題を解決するアプリをデザインすることを想定します。 1つは「ストレス過多」の問題です。私は友人を集めて、ストレスの問題を抱えているかどうか聞いてみたところ、12人中9人が「はい」と答えました。「いいえ」と答えた3人は、超人的な禅僧のような精神の持ち主ではないかと思えたくらいです。アプリのデザインにおいて考えるべき問題を見つけたら、次は問題定義（解決するべき問題の範囲を定める宣言文）を書きます。チームのメンバーに上手く問題を提示できるような、質の高い問題定義の書き方をご紹介します。あなたが素晴らしい製品アイデアを思いついたり、フィードバックを受け取ったときには、次の方法が思考の指針として役立ちます。問題を認識する私は、DAPPER GENTLEMENという会社でアプリのチーム開発の仕事をしていますが、アプリのデザインや機能の設計方法についての話題をよく聞きます。創造意欲やアイデアを得られるような良いデザインのアプリの話もあれば、時には全てにおいて出来の悪いアプリの話もあります。最近、私の妻が新生児の育児サポートアプリについて「これは悪いアプリね。」と話していました。私はデザイナーとしての直感から、何か問題がありそうだと思いました。私が「解決の必要な問題があるの？」と聞くと、妻は「いいえ、ただ話を聞いて共感してもらいたかっただけ。最後まで話をさせてくれる？」と言いました。「もちろん力になるとも！まず最初に、問題をより深いレベルで理解する必要があるね。」私は声を大にして言いました。「・・・（ため息）」多くの開発者やデザイナーは、ユーザーの声に耳を傾けて問題をよく考える時間を取らないため、ユーザーの抱えている問題の解決方法を知らないようです。これは彼らが怠惰だからではなく、問題の本質的な原因を深く考える術を知らないからです。デザインプロセスも何らかの始点が必要ですが、このような問題が始点となることも多いのです。私の妻の例では、彼女の使っているアプリが「悪いアプリ」であることが問題でした。問題を認識したら次にすべきこと：問題を理解する問題を認識するだけでは解決できません。問題についてよく知る必要があります。ユーザーの声に耳を傾けて考える問題の解決へと一気に急いではなりません。まずユーザーの声に耳を傾けて、現状を把握する必要があります（私と妻のやりとりの例を考えてみてください。）。一方的な質問も構いませんが、現状を把握する前に、解決策を提案すべきではありません。また問題に疑問を投げかけて、さらに深く掘り下げてみましょう。「私はストレス過多である」という最初の問題に戻りましょう。「アプリの出来が悪い」という問題は、おそらく「ストレス過多」の問題と同じように考えることができます。ストレスを管理する方法はいくつあるだろう？ストレスの量が、本質的な原因なのだろうか？それとも、もっと深くにある問題の兆候に過ぎないのだろうか？出来の悪いアプリを改良する方法はいくつあるだろう？アプリの全体的なデザインが、本質的な原因なのだろうか？それとも、もっと深くにある問題の兆候に過ぎないのだろうか？兆候と問題を見分ける兆候とは、製品においては機能性や使用感が「標準」的な品質を満たしていないと、ユーザーが主観的に感じることです。より分かりやすい例では、疲労感は睡眠不足の兆候です。疲労感は、元気に活動できるという「標準」の状態から外れていると感じる主観的な感覚であり、睡眠不足という問題の兆候となっているのです。「ストレス過多」の問題でも、ストレスを感じないという「標準」の状態から外れていると、本人が主観的に感じているのです。ストレスの対処方法には、夜にグラス1杯のワインを飲んだり、音楽を聴いたり、テレビを観たりなど色々あるでしょう。ストレス発散のために、精神崩壊や癇癪を起こすに至る人もいるかもしれません。静かな場所に座って、深呼吸をして、ストレスの原因について考えることもできます。もっとも、多くの人はストレス状態にあることに気づいてすらいないため、原因を認識することは難しいのです。では、「ストレス過多」は根本の問題でしょうか？もしかしたら、もっと深い問題の兆候に過ぎないかもしれません。問題を解決するには、それ自体が根本の問題なのか、それとももっと深い問題の兆候に過ぎないのか考える必要があります。 [PR] Webデザインで副業する方法とは根本原因を見つける問題の根本原因を見つけることはなぜ重要なのでしょうか？それは兆候を解決するだけでは、問題を完全に解決したことにならないからです。例えば、脚の痛みを感じたときにアスピリンを服用して痛みを緩和できても、痛みの根本の原因を解決したことにはなりません。問題の兆候として現れる痛みを何度も経験することになります。病院に行って「骨折が脚の痛みの原因です。」と診断されて初めて、骨折という根本原因を見つけることができるのです。では、「ストレス過多」の問題の根本原因を見つけるにはどうしたらいいでしょうか？トヨタ生産方式の「5つのなぜ」による分析を応用することができます。 5つの「なぜ」による分析 5つの「なぜ」による分析とは、「なぜ」から始まる疑問を繰り返すことにより、問題の根本に存在する因果関係を探り出すテクニックです。私の妻の話を思い出してみましょう。「これは悪いアプリね。それから、私が話をしているときには、もう少しよく聞いてくれても…。」彼女の抱えていた問題は、新生児の育児のための生産性向上アプリの使い方がよく分からないことでした。消費されたおむつの数や、ミルクの量などを楽しく管理できるアプリです。「5つのなぜ」による分析によって、このアプリの問題の深くにある根本的な問題を見つけてみましょう。なぜ出来の悪いアプリなのか？答え：正しく作動しないから。（より深い問題）なぜ正しく作動しないのか？答え：どこを操作したらいいのか分からないから。（より深い問題）なぜどこを操作したらいいのか分からないのか？答え：アイコンが上手く機能していないから。（より深い問題）なぜアイコンが上手く機能していないのか？答え：アイコンの選択後に、思っていたページに進まないから。（より深い問題）なぜアイコンの選択後に、思っていたページに進まないのか？答え：一見アイコンに見えるものがアイコンではない一方、アイコンには見慣れない要素が使われているから。（「問題解決につながる行動」が見つかりました！）私からこのアプリのデザイン担当者に意見を送ったため、この問題の根本原因には早く気づいてもらえたと思います。問題の根本原因はいつも「5つのなぜ」の5番目で見つかるとは限りません。では、根本原因を特定するにはどうしたらいいでしょうか？その鍵となるのが、「プロセスの欠け」または「問題解決につながる行動」を見つけ出すことです。これらは複数見つけられることもあります。「ストレス過多」の問題も同じように分析してみましょう。なぜ私はストレス過多なのか？答え：ストレス過多を起こす思考を多く抱えているから（より深い問題）なぜストレス過多を起こす思考を多く抱えているのか？答え：思考を鎮めることができないから（より深い問題）なぜ思考を鎮めることができないのか？答え：思考を鎮める練習をしていないから。（より深い問題、「問題解決につながる行動」が見つかりました！）なぜ思考を鎮める練習ができないのか？答え：思考を鎮める方法を知らないから。（「プロセスの欠け」が見つかりました！）なぜ思考を鎮める方法を知らないのか？答え：思考を鎮める方法が必要だと自覚していないから。（より深い「プロセスの欠け」が見つかりました！）この問題の根本原因は、思考を鎮めて精神を集中するプロセスが欠けていることだと判明しました。この問題では思考を鎮めることが、ストレス緩和、さらに問題解決につながるでしょう。次は、問題定義を発展させてみましょう。問題の再定義新しい問題定義：「ユーザーのストレスを緩和するために、精神を鎮められるように支援する」先の例では、5番目の「思考を鎮める方法が必要だと自覚していない」問題よりもさらに深い問題は見つけることができるでしょうか？「プロセスの欠け」をさらに深く考えることが、製品デザインに役立つことがあります。より深く抽象的な問題定義を書くことで、最初の兆候のみならず、より広い範囲の兆候を解決できるからです。また、デザインのプロセス全体を通して、問題定義は発展させ続けることができます。問題定義が深く具体的になり過ぎたときには、1段階元に戻して抽象化し、再定義すればいいのです。さらに新しい問題定義：「ユーザーのストレスを緩和するために、自分自身にもっと意識を向けられるように支援する」また、問題の再定義と組み合わせることで、根本原因を見つけて解決策を導くのに大いに役立つ手法があります。これらはチームでデザインの問題を深く考えるときにも応用できます。ブレインストーミングを実践する問題に取り組む全員（デザイナー、開発者、マーケティング担当、経済アナリストからセールス担当に至るまで）を集めます。デザインの問題を最終的に解決する仕事は、デザイナーに委ねられていますが、他の部門の人も役に立つ洞察力で貢献できるかもしれません。セールス担当はユーザーに最も近い存在であるため、問題をより深く理解しているかもしれませんし、経済アナリストは市場の読みにおいて優れているでしょう。問題のリサーチを実践するすでに似たような問題が発見されていないか調べるために、競合製品の市場分析を行うのも有効です。あるいは、消費者調査を実施することもできます（ストレスについて私が友人に聞いたように）。すでに市場に売り出している製品であれば、データ解析、ヒューリスティック分析、ユーザーテストなどを行うこともできます。モバイルアプリと正しい問題定義例として、問題定義が優れている3つのアプリを見てみましょう。 1. Enlight Enlight（iOSの写真加工アプリ）のStav Tishler氏によると、「これまでプロの写真家だけがデスクトップでのみ利用していた創造的なツールを、モバイル端末を使う写真家にも提供すること」がこのアプリの問題定義です。 Enlightは、優れたデザインとテクノロジーによってこの問題を解決しました。Lightricksが商標権を有する画像処理エンジンによって、Enlightの各種ツールでは、一貫性のあるUI（ユーザーインターフェース）が実現され、ユーザーは1つのツールで行った処理を、他のツールに継承させることも可能です。 2. PureChat PureChatのCEOであるHamid Shojae氏によると、「小規模ビジネスの運営者が、彼らのWebサイト上で訪問者とのコミュニケーションを円滑に行うことを支援すること」がこのアプリの問題定義です。 App StoreとGoogle Playの両ストアにおいて4.5星の評価を保持していることが、問題解決に成功した証といえるでしょう。 3. Crowd Mics Crowd MicsのCEOであるTim Holladay氏によると、「ユーザーに会議、ミーティングなどライブ形式の会合で自分の声が周囲によく通ることを可能とすること」がこのアプリの問題定義です。 Crowd Micsは、ユーザーのスマートフォンをワイヤレスのマイクに変えてくれるアプリです。結論あなたが製品によって解決したい問題を考えるために少しの時間をかけることで、将来、デザインを決定するときに役立つ強力な土台を築くことができます。ステップのおさらい問題定義製品によって解決したいと思う問題のリストを作成することから始めて、これらを考え合わせて問題定義を書きます。「5つのなぜ」による分析次に、「5つのなぜ」による分析を行い問題定義をより深く考えます。ブレインストーミングと問題定義の発展最後に、チームのメンバー全員を集めて、問題について議論と再評価を行います。より明確な問題定義が必要であれば、問題定義は繰り返して書きましょう。良い問題定義を作成できても、それにとらわれる必要はありません。デザインのプロセスが進む中で、新たに考えるべき事が発生すれば、問題を再定義しなければならない場面もあるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

事例から学ぶ！HubSpotがサイト改善に成功したUX戦略とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXPinのコンテンツ・ストラテジストであるJerry Cao氏によって投稿されました。 UXデザイナーのAustin Knight氏率いるチームが、Hubspotのサイトをリニューアルしたプロジェクトについて書かれています。 HubSpot（ハブスポット）のサイトは、世界の90カ国以上にわたり1万8000以上の企業にサービスを提供し、月間400万人以上のユーザーがアクセスしています。 HubSpotにとって、サイトこそ経営の要となるものでした。HubSpotが非公開会社から、多様な製品を提供する世界規模の公開会社へと発展するには、サイトのリニューアルが不可欠でした。サイトリニューアルのプロジェクトは、プロジェクト開始から一ヵ月半後に開かれる、HubSpotの年次イベント「INBOUND」で新しい製品ラインがリリースされるまでに、急いで完成させる必要がありました。 UXデザイナーのAustin Knight氏がこのプロジェクトを率いて、3つのチーム（ビジュアルデザイナー、デベロッパー、マーケティングマネジャー）が加わりました。またKnight氏はこの他に、製品のポジショニング戦略（product positioning）、コピーライティング、技術開発を担当する外部の6つのチームとも協力しました。この記事では、UXデザイナーが、過密なスケジュールのプロジェクトにおいて、リサーチ、共同作業、ユーザーに焦点を当てた「Lean UX」という手法を応用しながら、どのように良い結果を生み出せたのかを事例として紹介します。画像：HubSpotのリニューアルされたサイト次の3つのステップは、実際のプロジェクトをベースとしてUXPinが作成したベストプラクティスです。ステップ1：入念なリサーチ、継続的なテスト HubSpotのプロジェクトは、まず最初に、Knight氏が「Lean UX」という手法をチームに紹介することから始まりました。「Lean UX」とはJeff Gothelf氏によって提唱されている手法で、継続的な「学習ループ」（構築 – 評価 – 学習のループ）を用いてデザインプロセスを軽量化することによって、ビジネス戦略を整えるためのものです。このプロジェクトでは、ステップ1は、分析とユーザー調査を行い、手早く予測の検証を行うことでした。分析＆ヒートマップ多くのケースにおいては、デザインチームはマーケティング部門にデータ分析を依頼するのが一般的ですが、今回のプロジェクトでは、Knight氏は自らデータ分析を始めました。HubSpot、Googleアナリティクス、Mixpanelから膨大なデータにアクセスできました。主な課題は、これらの膨大なデータを分析して、意味のあるパターンを見つけ出すことでした。 Knight氏はまず、多くのユーザーの行動を分析した結果、次のような傾向が見られることに気づきました。サイト上でPRICING（価格表）に最初にアクセスする（ユーザーは製品のメリットよりも価格を優先していることがわかります。）サイト上でFAQ（問い合わせ）に最初にアクセスする（ユーザーの疑問が解決されていないことがわかります。）サイト上でサイト内検索を最初に利用する（主に製品について不明な点を検索しているので、ユーザーが必要な情報をサイトで得られていないことがわかります。）この分析から、HubSpotのサイトは完成度は高いものの、重要な情報が欠けているために、コンバージョン率が低下していることが判明したのです。 Knight氏はまた、2万5000人のユーザーを対象に、ヒートマップとスクロールマップによる分析を行い、合計46万7308のデータを集めました。数年分のデータを集めることができたため、問題（例として、ユーザーの25%しかサイトのページをスクロールしていないことなど）が生じた原因を理解するのに役立ちました。セッションの記録最後に、セッションの記録によって、定量分析と定性分析を行いました。セッションの記録は、生きた、匿名性のある、未だ分析されていないデータです。実際のユーザーの行動がそのまま反映されたデータなので、分析結果も信頼できます。セッションの記録は、デザインプロジェクト全体を通して行い、ユーザーへのインタビューやユーザビリティテストの結果を検証するのに役立てます。定性分析定量分析は何（What）を分析するのには役立ちますが、なぜ（Why）を知ることはできません。ユーザーエクスペリエンスに期待されることや、行動に隠された動機を知るためには、デザイナーはユーザーと利害関係者にインタビューを行う必要があります。 1. ユーザーへのインタビュー HubSpotのサイトの利用者の10%は、ログインや情報検索をしているユーザ―であるため、サイトのリニューアルにあたっては、これらの特定のグループを無視することはできません。データの分析結果を検証するためだけではなく、新しいサイトでどのようなコンテンツを提供するべきかのアイデアのヒントを得るために、Knight氏はユーザーへのインタビューを行いました。ユーザーへのインタビューのプロセスを徹底して考えたことで、的を絞って意見を集めることができました。 2. 利害関係者へのインタビューこのプロジェクトによってHubSpotのサイトの外観が根本的に変わることになるため、Knight氏はまた、HubSpotの会社の取締役、製品、マーケティング、セールス、カスタマーサポートのチームにもインタビューを行いました。次にKnight氏は、ユーザーへのインタビューから得られた意見、カスタマーサポートの記録、HubSpotのサイトのリニューアルの不要な原案、Twitterのツイート、電子メール、さらにはKnight氏自身の講演イベントでの参加者との会話などの結果を総合的に勘案にしました。「プロジェクトで取り組んだのは、『データを参考とした、人間を中心に考えたデザイン』だ。」とKnight氏は述べています。また、「デザイナーは可能なときにはいつでも、自分自身でデータを解釈して、デザインに関する決定を行う必要があります。近年、定量的なデータと定性的なデータを活用することで、デザイナーたちがますます力を発揮できるようになりました。一般的に、単なる意見や誰かの「好み」に基づいて決定することもなくなり、それ以上のことが可能になっているのです。今日のデザイナーが真に力を発揮するには、明示的なデータと黙示的なデータの両方を活用して、デザインのソリューションを導くことが大切です。」とも述べています。多変量テストによって、小さな変更を試す最後に、Knight氏はリサーチの結果を基にして、多変量テスト（Multivariate Testing：レイアウトデザインの候補の中から、最適なデザインを選ぶための手法）を行うために、デザインにいくつか変更を追加しました。多変量テストは、特定のデザイン要素を決定、却下することで、サイト全体のリニューアルに進む前に、チーム全体として戦略的な決定を行うのに役立ちます。ステップ2：実際のデザインを設計する Knight氏は、「全体の設計→テスト→学習→イテレーション→最適なソリューションの選択」という構造化されたプロセスの手法を用いました。簡単なプロトタイピング多変量テストによって、レイアウトのデザイン候補をチームで3つに絞り、さらにプロトタイプを作成しました。主な方向性が定まったところで、Knight氏は最初の段階でイテレーションを繰り返して行い、次に外観のデザインに取り組むという手法を取りました。実際には、ユーザー望む方向性や意見を反映することに多くの時間を費やしたことを考えれば、プロトタイプでも最終的な完成製品に近いものでした。 Knight氏は次のように述べています。「紙のプロトタイプ、ワイヤーフレーム、外観のデザインの段階に至るまで、テストはユーザーと共に行っています。」「プロジェクトのすべての段階において、ユーザーの声が反映されています。デザイナーとしては、ユーザーの声は耳に痛いこともあるかもしれません。ユーザーの意見にすべて従うのではなくて、方向性を見出すために活用するのがいいと思います。」モックアップ外観のデザインの段階において、Knight氏は特にビジュアルデザイナーと一緒に仕事を行いました。また、Knight氏はデベロッパーとは、プロジェクトの各段階ごとにデザインについてディスカッションを行っていたのも特筆すべきことです。開発側は、プロトタイプを作成する段階で集中的にコーディングを行う一方、全体を通してイテレーションを行うことで、チーム全体としてプロジェクトの進行段階が揃うようにしています。外観のデザインこうしてチームは、現代的で、美しく、鮮やかな色、HD画質の画像、型にはまらないグリッドデザインを活かしたサイトが完成しました。このグリッドデザインは、リニューアルしたサイトには「生き生きとしたデザイン」が必要だという観点から生まれたものです。グリッドデザインをベースとして、多くのデバイスに対応したマルチプラットフォームで、コンテンツの変更や削除も容易です。また重要なコンテンツは、ユーザーや利害関係者の提案に応じて、アップデートしやすくなっています。画像処理画像の枠のデザインも、型にはまらないグリッドデザインです。プロジェクトのチームは、まずサイトのレイアウトに完璧に収まる画像を選びました。マウスをホバーしていない状態（off-hover）では焦点のぼやけた画像の一部が表示され、マウスをホバーさせた状態（on-hover）では画像が右のグリッドの領域まで広がり、画像全体と追加の情報が表示されるような設計になっています。この画像処理によって、識別しやすいデザイン要素が生まれ、ユーザーのアクセスを大幅に増加させるインタラクションが実現しました。またチームは、ユーザーへのインタビューから、個々のユーザー向けに動的なコンテンツを提供することが、サイトリニューアルの成功に大切な要因であるとわかっていたので、これも開発しました。互換性とWebアクセシビリティ最後に、HubSpotのサイトのユーザーの16%はモバイル端末からアクセスしていること、アメリカの人口の19%はWebアクセシビリティのニーズがあることを考えると、コーディング作業に加えて、互換性とWebアクセシビリティを考慮するのも重要なことでした。プロジェクトの各作業の段階は同時並行で進めていたので、モバイル端末向け、デスクトップ端末向けの各サイト設計も同時並行で進めました。 [PR] Webデザインで副業する方法とはステップ3：コーディングとテスト次のステップでは、HubSpot社のCMSを利用して、きれいなコードを設計するのが目標となりました。すべてのデバイスにおいてコードの互換性が保たれるように、Knight氏は、ビジュアルデザイナー、エンジニアと共に、QAテスト（品質保証テスト）を定期的に実施しました。各種デバイスや、Chrome、Safari、Firefox、Internet Explorer、Edge、Opera、Yandexなど各種ブラウザの多数のバージョンの解像度ごとに、Webサイトが正しく機能するかチェックするテストも行いました。さらに、BrowserStack（多数のブラウザ環境下における作動を再現するためのエミュレータ）を使い、実際のデバイス環境下におけるWebサイトの作動の再現も行いました。設計を改良するときには、ユーザーのプラットフォームごとの割合はすでに把握できていたため、利用者数やクリティカリティ（Criticality：システムエラーなどにおいて主要な要因を分析するための指標）を考えながら、優先順位を決めて効率的に進めることができました。ステップ4：テストの継続とイテレーションリニューアルしたHubSpotのWebサイトは、予定通り、年次イベント「INBOUND」の舞台において、同社の共同設立者たちによって、Webサイトのサポート対象である新製品や新機能の紹介とともに初公開されました。新製品のリリースは、大成功を収めました。しかし、チームとしては引き続き「Lean UX」の手法をプロジェクトで実践するため、栄光に浸っている暇はありませんでした。早速、チームはGoogleアナリティクスとHubSpotのサイトからデータを集計して、次の指標に注意を向けました。コンバージョン率（Conversion rate：目標の達成率）送信率（Submission rate：ユーザーがフォームにデータ入力して送信する率）離脱率（Drop-off rate）目標達成数（Goal completion）ナビゲーションサマリーにおける、参照元ページと移動先ページ検索クエリ（Search Queries）チームは、直帰率（Bounce rate：ユーザーが1ページだけ見てサイトを去る率）、ページ滞在時間など重要業績評価指標（KPI：Key Performance Indicators）として役に立つ指標のみを分析しました。さらにデザインの改良を重ねるために、チームはヒートマップを使って2万5000という膨大なセッションを分析し、追加のユーザビリティテストも行いました。結果：データが示すUXの成功今回のプロジェクトは、Knight氏とチームが「Lean UX」の手法を全て取り入れた初の試みでしたが、データ分析と設計を上手く組み合わせて、迅速にビジネスの成果につなげることができました。またリニューアルしたのHubSpotのWebサイトも、今回のプロジェクトのプロセスと同じくらい、柔軟性の高い設計に仕上がったので、今後のイテレーションも容易に行うことができると思います。デザインのリニューアルや、ユーザーやビジネス上のニーズに応じた修正にも、幅広く対応できるでしょう。秘密保持契約（NDA）のためすべては公開できませんが、Webサイト公開後のビジネス上の成果を、次にいくつかご紹介します。ユーザーのコールトゥアクション（CTA：Call To Action）への反応率の増加ユーザーのナビゲーション要素への反応率の増加製品のトライアル版契約数の増加同社の製品チームにおけるストレスの緩和今では、HubSpot社は「Lean UX」の手法を絶賛する支持者となっています。 Knight氏は、「私たちのチームは、プロジェクトの共同作業を効率的に進めることができた。」、「すべてのプロセスにユーザーの声を反映した結果、チームが誇りに思えるような、インパクトのあるWebサイトを構築できた。」と述べています。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJames Stone氏によって投稿されました。プロジェクトをタイトなスケジュールで進めるときには、共同作業は困難を極めます。デザイナーとエンジニアの意見を一致させるのは、非常に大変です。もし彼らが同じプロジェクトで、Webサイトを公開しようとすれば、オフィスの中は戦争状態と化すかもしれません。では、デザインを素早く完璧にこなし、かつ世界に通用するレベルのWebサイトを構築するにはどうしたらいいでしょうか？この記事では、プロジェクトの共同作業における問題を解決するためのアドバイスを紹介します。すべてのアドバイスは、私が過去10年間にWebデザイナーおよびエンジニアとして経験してきた成功と問題から引き出したものです。目次グリッドシステムをレスポンシブデザインで設計するピクセルパーフェクトなデザインを実現できるツールを使う Photoshopの代替ツールを考える値を統一するプロトタイプを使った共同作業をするデスクトップファーストの手法を排除しないことアセットの引き継ぎには十分注意を払う 1. グリッドシステムをレスポンシブデザインで設計するグリッドシステムはすでにご存知かもしれません。私がエンジニアとしてデザイナーと共同作業をしたときに直面した問題は、グリッドシステムをレスポンシブに設計するスキルが、デザイナーたちに不足していたことです。グリッドの幅を具体的に設定するまず技術的な話から始めましょう。最初に、グリッドの幅は具体的な数値で設定し、各グリッドごとにガターのサイズも正確に把握します。こうしておくことで、デザインに統一感が生まれ、またくり返し微調整する手間も省けます。開発チームへグリッドシステムを引き継ぐときにも、数値は正確に揃えておきましょう。もしパディング（padding）を15ピクセルで設定したら、厳密に15ピクセルになっていなければなりません。グリッド全体の幅を1000ピクセルで設定したときも、厳密に1000ピクセルです。レスポンシブデザインとは、あらゆるデバイスやシステムにおいてWebデザインが柔軟に機能することを意味しますが、最初の数値設定は厳密に行う必要があります。デザイナーは、モバイル端末上の表示もチェックすることモバイルビューデザインを美しく仕上げても、それで完成ではありません。モバイルビュー（モバイル端末上の表示）も忘れずにチェックしてください！もしデザイナーがモバイルビューをチェックしなければ、エンジニアはデザインの意図を汲みながら、モバイル端末上でも上手く作動するように、すべて一人で設計しなければなりません。私はエンジニアとして、こういう状況によく遭遇します。デザイナーも、グリッドシステムをレスポンシブに設計する方法について、よく理解しておくべきです。プロジェクトの共同作業を円滑に進めるためには、デザイナーは、デスクトップ版からモバイル版へ移植するときの各要素の並べ方（mobile stacking order）も考えておくといいでしょう。また時間に余裕があれば、モバイルビューのモックアップを作成しておくと大いに役に立ちます。完成製品のデザインをイメージしやすくなります。互換性の問題デスクトップ上で作成したグリッドシステムは、モバイル端末上では上手く機能しないこともあります。たとえば、サイズの大きい要素は、モバイル版のサイズに上手く縮小されないことがよくあります。デスクトップとモバイルのインターフェース間では、このようにデザインの互換性の問題が起こることがあり、タイムラインを示すUIの要素（timeline UI element）にも見られます。デスクトップ上では問題なく表示され、時間軸上の各ポイントも見やすいデザインです。しかしモバイル端末上では表示が崩れることがあります。デザイナーは、こうした問題を自力で解決する必要があります。そうでなければ、エンジニアにデザインの意図を誤解され、予想もしなかったようなおかしなデザインが生まれるおそれがあります。 [PR] Webデザインで副業する方法とは2.ピクセルパーフェクトなデザインを実現できるツールを使うショックを受けてほしくないのですが、Photoshopは現代的なWebサイトを構築するのに適したツールとはいえません。私はエンジニアとして、Photoshopで作成されたモックアップを渡されることがよくあります。残念なことに、Photoshopで作られたモックアップは、エンジニアがWebサイトを構築するときには問題となることがあります。Photoshopでは、エンジニアが必要とするレベルの精度と正確さを実現できないからです。フォントの整合性第一に、PhotoshopとWebの間で、フォントの整合性が保たれる保証はありません。 Photoshopのファイル形式でデザインされた文字は、Web上で表示が崩れてしまうこともよくあります。文字がより太くなったり、全く異なるデザインになっていたりするのです。オープンソースのフォントでさえ、Photoshopで編集すると、Web上で表示が変わることがあります。デザイナーは、ウェイト（太さ単位）を基本にして、フォントの調整を行うべきです。スクリーン上での表示を基本にしてフォントの調整を行うのは、良くありません。Webを構築したときに、デザインが歪んだり劣化する原因になるおそれがああるからです。パフォーマンスの問題ピクセルパーフェクト（px単位の正確な設計）が重要なのは、他にもデザイナーがWeb用に作成するPhotoshopのファイルには問題があるからということも理由の1つです。その1つの例がドロップシャドウです。 Photoshopは高機能なドロップシャドウなどを備えています。デザイナーは、シャドウ、マスクなどのデザイン効果を柔軟に使いこなすことができます。しかし、エンジニアがこれらのデザインをWeb用にコーディングするときには、使える選択肢がかなり限られているのです。また、エンジニアがWebサイトのフロントエンドの開発をするときには、パフォーマンスを非常に重視します。スタイリッシュなUI要素を表現するために、24bitの半透過または透過のPNG形式のサイズの大きい画像などを使うとしたら、Webサイトの読み込みに時間がかかります。もしこのような要素が100個あれば、100倍の時間がかかり、Webサイトの動きは非常に鈍くなります。解決策の1つは、ドロップシャドウを使う代わりに、CSSでコーディングすることです。 CSSを使うと、ドロップシャドウの他にも多くのデザイン効果を表現できます。もしエンジニアがCSSを使えるなら、Web上にPNG形式の画像を埋め込む代わりに、CSSを使うべきです。軽量なデザインが可能となり、要素のサイズを小さくすることができるというメリットがあります。しかしデメリットもあり、CSSで作ったタイポグラフィやドロップシャドウは、元の画像と全く同じデザインに仕上げることはできません。 2つの画像のうち、上が透過のPNG形式の画像で、下がSVG形式の画像です。見た目はほとんど同じですが、画像のサイズはPNG形式は12.3kもあるのに対して、SVG形式はわずか1.7kです。SVG形式の場合、シャドウをデザインするときには、ディテールの調整、ブレンドモードによる色の変更なども、完璧に行うことができます。一方、透過のPNG形式だと、画像の背景色を変更するときに、背景色がアルファチャンネルのデータ領域ににじんでしまって、他の要素の周りに光の輪がついたように見えることがあるのです。 Photoshopの代替ツールを考えるあなたがどのようなツールを選ぶとしても、PhotoshopがWebデザインのツールとしては最適な選択でないことは明らかです。たとえば私は、Bohemian Coding社の開発したSketch 3というデザインツールを使っています。今のところSketchにはバグや問題もあるのですが、デザインの整合性を保つためには非常に優れたツールです。まず、px単位で厳密に行う設計なデザインを素早く簡単に行うことができます。フォントやドロップシャドウも、CSSでコーディングするのと変わらない出来栄えです。 Sketchには、作成したデザインからCSSのコードを取得して、コピー&ペーストで利用できる機能もあります。そのため、一度デザインしたものを、最終的にHTMLやCSSでコーディングし直す必要もありません。ピクセルパーフェクトなデザインを可能とする現代的なツールを使えば、デザインの意図を完成製品に反映することが可能です。プロジェクトのメンバーの仕事の負担軽減にも大いに役立ちます。より詳しい活用方法をご紹介すると、私は各レイヤーのプロトタイプを作るために、Sketchで作成したモックアップをインポートして共有しています。こうすることで、同じチームのエンジニアはデザインの見た目だけではなくて、デザインの動作性も知ることができます。 3. 値を統一するマージン（margin）、フォント、行（line）の値を統一することで、プロジェクトを速いペースで進めるときにもフラストレーションの緩和に役立ちます。良いデザインを生むためには、フォントのサイズやウェイト（太さ）、文字間隔、行の高さを制限することも大切です。具体的なアドバイスは、次に示しています。マージン（margin）マージンについてのアドバイスはシンプルです。マージンとパディングの幅のpx（ピクセル）の数値は、端数を切り捨てて、5の倍数に設定します。たとえば、13、17pxなどよりも、10、15、20pxなどを使いましょう。デザインと開発の両方の観点から、5の倍数のpxを使うことには、統一感を生む効果があるといえます。行（line）の高さ行の高さを統一することで可読性が高まります。もし行の高さを出力するときに、Photoshopなどのプログラムをデフォルトとして使っているとしたら、可読性に問題が生じるおそれがあります。また、行の高さを1.2（元のフォントの1.2倍の高さ）に設定するのは、現代的なWebデザインには適していません。エンジニアやエンドユーザーが問題を抱える可能性があります。多くのWebサイトでは、可読性を最大限に高めるために、行の高さを1.5または1.6に設定しています。エンジニアが後で修正しなくてもいいように、本文（body）のテキストにはこれらの数値で統一しておくといいでしょう。もっとも、見出し（headline）のテキストは、1.2で設定しても見栄えの良いデザインになります。ただし一貫性を保つのがルールです。たとえば完成製品のデザインにおいて、見出しの行の高さを1.2、本文の行の高さを1.5とすることが目標であれば、このデザインを実現できるように、モックアップやプロトタイプの作成においても、同じ数値を一貫して使うことが大切です。フォントサイズと文字間隔使用するフォントサイズは3または4種類、最大でも5種類までに止めましょう。 BootstrapやZURBのFoundationなどのレスポンシブデザインに使えるフレームワークでは、フォントサイズが規定値になっていることがあります。さらに、モバイル版を設計するときには、見出しのフォントサイズが一回り小さな規定値になります。デザインするときには、これらの規定値を解除しておきましょう。見出しに使うフォントサイズは、端数のない数字で統一します。ページからページへ移行するときにも、デザインの統一感が保たれる効果があります。40pxと42px、または38pxと38.5pxなど不揃いな値を組み合わせて使うと、デザインの統一感が失われてしまいます。文字間隔についても、値を統一することが大切です。文字間隔には、見出しを強調して、美しいタイポグラフィを生み出す効果があります。また、もしあなたがデザイナーで、文字のデザインについてエンジニアより主導権を握りたければ、各要素ごとに文字間隔を統一して設定しておきましょう。フォントのウェイト（太さ）エンジニアの観点からいうと、デザイナーがフォントのウェイトを増やすほど、フォントの読み込みに時間がかかります。これは、Googleフォント、AdobeのTypekit、その他すべてのフォントについて当てはまります。どのくらいの時間になると思いますか？フォントのウェイトの数を2上げるごとに、ページの読み込みに2倍の時間がかかります。Webサイトの読み込み時間が長くなるほど、利用者もユーザーエクスペリエンスを遅く感じるはずです。フォントのウェイト数はなるべく控えめにすることを、私はおすすめします。デザイナーは「このデザインのフォントはもっと軽いウェイトで実現できないか？」、「5ではなくて3のウェイトでも良いのではないか？」など自問してみるべきです。ウェイトの数を小さめにすれば、プロジェクトを効率的に進めて、軽量なデザインを実現することができますし、結果としてモバイル端末や他のプラットフォーム上での読み込み時間も少なくなるので、ユーザーエクスペリエンスの質を高めることにもつながります。 4. プロトタイプを使った共同作業をするプロジェクトの共同作業を進めるときに、プロトタイプを利用しないとしたら、ミーティング、電話のやりとり、（コーヒーのしみのついた）手書きのメモなどが溢れかえり、コミュニケーションは収拾がつかなくなります。言うまでもなく、文書は管理不可能になり、プロジェクトマネジャーやデザイナーたちはデザインのコンセプトを伝えるのに苦戦するでしょう。画像：注釈を入れすぎたワイヤーフレームの悪い例次に、文書を減らして、明確なコミュニケーションを図るのに役立つステップをご紹介します。まずプロジェクトの開始時に、要件定義書などは、網羅的な文書というよりもナレッジハブ（情報の中央管理システム）として活用するよう、提案してみましょう。たとえば次の画像に示した要件定義書では、基本デザインと技術原則を定め、これにプログラムのバージョン管理のために使うツールへのリンク情報を加えただけのシンプルなものです。あとは、これらのツールを使ってデザインやバージョンをマークアップ言語で記述したときに、現場での必要性に応じて、追加の文書を作成すればいいのです。画像：Autodesk社のソフトAutoCAD 360で作成した製品の要件定義書プロジェクトの開始後には、システム全体のインタラクションを考えるために、ユーザーフローを作成します。次の画像で示すように、ユーザーエクスペリエンスにおいて重要な鍵となる部分には、コメントを追加しておきましょう。エンジニアとプロジェクトマネジャーが全体の流れを把握するのに役立ちます。画像：Autodesk社のソフトAutoCAD 360で作成したユーザーフローの図ユーザーフローについてディスカッションを重ね、イテレーションを実践したら、次はユーザーエクスペリエンスのデモを行います。ローファイのプロトタイプを作成し、エンジニアに説明するためのコメントを余白に加えておきます。 5. デスクトップファーストの手法を排除しないこと私の携わったプロジェクトの約95%は、いわゆる「デスクトップファースト」の手法で開発が進められました。デスクトップファーストは、モバイル版より先にデスクトップ版から、インターフェース、デザイン、インタラクションなどの開発を進める手法です。デスクトップファーストと対比される手法がモバイルファーストで、Web製品のモバイル版を開発するときには、とても優れた手法です。しかしながら実際に有効活用するのが難しいこともあり、デザイナーはデスクトップファーストの手法を排除するべきではありません。デスクトップファーストで開発を進めるとして、すでに製品のユーザーがいるときには、Googleアナリティクスのトラフィック分析を利用すれば、ユーザーの使っているデバイスの「画像の解像度」を知ることができるので、最適なスクリーンサイズを決定できます。プロジェクトによっては、13インチまたは15インチのMacBook Pro Retinaディスプレイモデルのスクリーンに合わせてデザインすることもあるかもしれません。おそらく、12インチの小型ノートPCなどのスクリーンに合わせてデザインすることが最も多いと思いますが。 Googleアナリティクスを利用することで、ユーザーがコンテンツをどのように見ているかを知ることも、コンテンツがスクリーン上で一番映えるにはどうデザインしたらいいかを知ることもできます。またCSSのメディアクエリ（Media Queries）とブレイクポイント（Breakpoint）を、レスポンシブデザインに上手く活用する方法を知ることも大切です。ブレイクポイントのpxの数値は、デザインが良く見えるように適切に設定します。 6. アセットの引き継ぎには十分注意を払うデザインした要素などアセットをチームのメンバーに引き継ぐときには、渡すだけで済むこともあれば、デザインを改良するためにコミュニケーションを何度も重ねなければならないこともあります。「画像はプログレッシブJPEG形式にするべきか？」、「どのくらい縮小するか？」、「SVG形式にするべきか？」、「SVG形式の画像を最適化する方法は？」、「SVG形式の画像をどのように作成するか？」などのやり取りが行ったり来たりすることもあります。たとえば、デザイナーがサイズの不揃いなアイコン一式を作成したとします。これらを引き継いだエンジニアは、SVG形式のファイルでアイコンを作成し直すことになります。SVG形式のファイルはパフォーマンスが高い一方で、そのままでは要素のサイズは不揃いなので、スクリーンの上（top）または下（bottom）に合わせて配置したたときには、統一感のないデザインになります。その結果、エンジニアはすべてのアセットを最初から作り直すか、CSSでコーディングをしてサイズを統一しなければなりません。仕事の無駄を避けるには、なるべく早い段階で、最適なファイル形式を選んでおくべきです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

【無料版OK】ChatGPTで簡単作成！効果的なプロジェクト報告書フォーマット

田島悠介プロジェクト完了後の報告書フォーマットの作成は、プロジェクトの成果を適切に伝え、将来の改善につなげる重要なステップです。大石ゆかり効果的な報告書を作成するためには、適切なフォーマットと内容が不可欠ですよね。田島悠介本記事では、ChatGPTを活用してプロジェクト完了後の報告書フォーマットを作成する方法をご紹介します。大石ゆかりワクワクします！よろしくお願いします！田島悠介先にこの記事を選んでくれたお礼にちょっぴりオトクな情報です。生成AIを仕事で活かしたい人は『GAIナレッジベース』を使ってみましょう。500件以上のプロンプト集や最新ニュースで効率や視座が変わり、自分らしいキャリアをデザインできます。無料なので30秒だけでも見てみてください。今すぐ働き方を変える＞さて、それでは解説を始めます。 ChatGPTを活用したプロジェクト完了報告書フォーマットの作成 ChatGPTを使用して、効果的なプロジェクト完了報告書のフォーマットを作成する方法をステップバイステップで解説します。 1. プロンプトの作成まず、ChatGPTに適切な指示を与えるためのプロンプトを作成します。以下は、プロジェクト完了報告書フォーマットの作成に適したプロンプトの例です。 #命令以下の要件を踏まえて、プロジェクトの完了後の報告書フォーマットの提案を行ってください。 #役割あなたはプロジェクトマネジメントコンサルタントです。 #目的・プロジェクトの結果を明確に伝えること・将来のプロジェクトでの改善点や学びを明確にすること #背景と課題・大手IT企業で新しいプロダクト開発のプロジェクトが完了した。・これまでの報告書は非常に簡素で、具体的な成果や学びが不明確だった。・プロジェクトのステークホルダーが成果を正確に把握することが難しく、改善点の検討が難しい状況となっている。 #ターゲット・プロジェクトのステークホルダー（経営層、関連部署のマネジャー等）・プロジェクトチームのメンバー #プロジェクト詳細・プロジェクト名：NextWaveサービス開発・プロジェクト期間：2022年1月 - 2023年8月・予算：2億円・チームメンバー数：30人 #報告書作成の条件・報告書はA4サイズの20ページ以内でまとめること。・グラフや図表を活用して、情報を視覚的にわかりやすく伝える。・成果だけでなく、問題点や学び、今後の改善点についても明確に記載する。 2. ChatGPTへの入力作成したプロンプトをChatGPTに入力します。無料版のChatGPTでも十分な結果を得ることができますが、有料版を使用するとより高速で質の高い回答を得ることができます。 3. 出力結果の確認と編集 ChatGPTから得られた出力結果を確認し、必要に応じて編集を行います。以下は、ChatGPTから得られた出力結果の例です。プロジェクト完了後の報告書フォーマットの提案: ## 報告書フォーマット: ### タイトルページ: - プロジェクト名: NextWaveサービス開発 - プロジェクト期間: 2022年1月 - 2023年8月 - 作成日: [報告書の作成日] - 作成者: [あなたの名前] - お問い合わせ先: [あなたの連絡先情報] ### 目次: 1. プロジェクトの概要 2. 達成した成果 3. 問題点と挑戦 4. 学びと改善点 5. 今後の展望 6. 結論 7. 付録 ### 1. プロジェクトの概要: - プロジェクトの背景 - プロジェクトの目的 - プロジェクトの対象業務 ### 2. 達成した成果: - プロジェクトの成果の概要 - 成果の詳細（数値データ、KPIの達成度） - 成果の視覚的な表現（グラフ、図表） ### 3. 問題点と挑戦: - プロジェクト実施中に発生した問題点 - 問題点の影響 - 問題解決のための取り組み ### 4. 学びと改善点: - プロジェクトから得た学び - 将来のプロジェクトでの改善点 - AIを活用したデータから得られた改善提案 ### 5. 今後の展望: - プロジェクトの成果を活用した今後の戦略 - 新たなプロジェクトへの適用 - ステークホルダーへの提言 ### 6.

生成AI・ChatGPT

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] Webデザインで副業する方法とは3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。 5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。垂直方向の文字が、水平方向の文字とアセンダ（アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。可読性が重視されるテキストに最適です。 6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。このフォントファミリーは51種類のウェイトから構成されています。古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。 7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。 8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。 9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。 10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade

Webデザイン

【無料版OK】ChatGPTが導く企業成長戦略：限られたリソースで利益を最大化

限られた人材・資金リソースを効果的に活用し、企業の業績を最大化するための戦略立案は、現代のビジネス環境において極めて重要な課題です。特に、複数の大型プロジェクトを同時に進行させる中堅テック企業にとっては、リソースの適切な配分がプロジェクトの成否を左右する重要な要素となります。本記事では、AIを活用した効果的なリソース配分と戦略立案の方法について詳しく解説します。生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録効果的なリソース配分のための戦略立案限られたリソースを最大限に活用し、各プロジェクトのROIを向上させるためには、綿密な分析と戦略的なアプローチが不可欠です。以下に、効果的なリソース配分のための主要な戦略を紹介します。 1. プロジェクト評価と優先順位付けまず、各プロジェクトの詳細な分析を行います。目的、予算、期待ROI、進行状況、リソース要求などの情報を総合的に評価し、企業の長期ビジョンとの整合性を確認します。この評価に基づいて、高いROIと低いリスクを持つプロジェクトを優先的に扱うことで、全体的な成果を最大化することができます。 2. リソース割り当ての最適化人材のスキルセットを適切に評価し、各プロジェクトの要求と一致させることが重要です。特に重要なプロジェクトには十分なリソースを確保し、スキルの高いリーダーシップとプロジェクト管理能力を持つ人材を配置することで、プロジェクトの成功率を高めることができます。 3. リスク管理の徹底各プロジェクトのリスクを評価し、それを最小化するための対策を立てることが不可欠です。予算管理、リソースの追加確保、スケジュール管理などを通じて、プロジェクトの遅延や品質低下のリスクを軽減します。また、コスト管理ツールの導入や定期的な進捗評価を行うことで、問題の早期発見と対処が可能になります。 4. コミュニケーションと透明性の確保プロジェクトマネージャーとの継続的なコミュニケーションを通じて、各プロジェクトの進行状況とリソース要求を正確に把握することが重要です。また、経営陣に対しても進捗状況とリソース割り当ての透明性を提供し、迅速かつ適切な意思決定をサポートします。 5. 継続的な改善プロセスの導入プロジェクトマネジメントプロセスを常に監視し、効率性を向上させるための改善策を積極的に導入します。過去のプロジェクトから得られた教訓やベストプラクティスを文書化し、将来のプロジェクトに活用することで、組織全体のプロジェクト管理能力を向上させることができます。 6. AIの活用によるデータ駆動型意思決定 AIを活用することで、プロジェクトの進行状況の監視や期待ROIとの比較を自動化し、リアルタイムでリソースの最適な割り当てを提案することが可能になります。このようなAIツールを活用することで、より効果的かつ効率的なプロジェクト管理を実現できます。これらの戦略を効果的に実施するために、AIを活用したプロンプトエンジニアリングが非常に有効です。以下に、リソース配分の最適化のためのAIプロンプトの例を示します。 #命令以下の要件を踏まえて、複数のプロジェクトが進行中の企業で、限られた人材・資金リソースを効果的に優先順位付けし、最大のROIを目指すための戦略を構築してください。 #役割あなたはプロジェクトマネジメントの専門家です。 #目的・既存の人材・資金リソースを最も効果的に利用し、企業の業績を最大化させること。・各プロジェクトのROIを向上させること。 #背景と課題・企業はITソリューションを提供する中堅のテック企業である。・現在、5つの大型プロジェクトが進行中であり、それぞれのプロジェクトマネージャーからのリソース要求が増えている。・企業の資金的・人材的リソースは有限であり、全てのプロジェクトに十分なリソースを供給することは不可能である。・過去にはリソースの不足から、プロジェクトの遅延や品質の低下が発生している。 #企業情報・業界: ITソリューションサービス・年間売上: 約300億円・従業員数: 800人・主な顧客: 金融業界、製造業界、通信業界・社内文化: 革新的で技術者主導の文化。新しい技術の導入に積極的。 #プロジェクト情報・進行中のプロジェクト: 5つ・それぞれのプロジェクトの予算、期待ROI、完了予定日、必要人材、現在の達成状況等の詳細なデータが存在する。 #条件・各プロジェクトには、その目的・背景・予算・期待ROI・進行状況・リソース要求といった詳細情報が提供される。・人材は特定のスキルセットを持っているため、そのスキルセットを考慮してプロジェクトに割り当てること。・予算や人材の不足から生じるリスクを最小化するための戦略も提案すること。このプロンプトを使用することで、AIは企業の特性やプロジェクトの詳細を考慮した上で、効果的なリソース配分と戦略立案を提案することができます。例えば、以下のような具体的な戦略が得られる可能性があります。このような状況でプロジェクトの優先順位付けとリソースの最適な配分を行うために、以下の戦略を検討できます。 1. プロジェクト評価と優先順位付け: - 各プロジェクトについて、目的、予算、期待ROI、進行状況、リソース要求を詳細に分析します。 - 各プロジェクトの戦略的重要性を評価し、企業の長期ビジョンと一致しているかどうかを確認します。 - 期待ROIとリスクの関係を評価し、高いROIと低いリスクを持つプロジェクトを優先します。 2. リソース割り当て: - 利用可能な人材スキルセットを評価し、各プロジェクトに必要なスキルセットと一致させます。 - リソースの供給と需要を調整し、特に重要なプロジェクトに十分なリソースを確保します。 - 人材のアサインメントにおいて、スキルの高いリーダーシップとプロジェクト管理能力を持つ人材を重要なプロジェクトに配置します。 3. リスク管理: - 各プロジェクトのリスクを評価し、リスクを最小化するための対策を立てます。これには、予算の適切な管理、リソースの追加確保、スケジュール管理が含まれます。 - プロジェクトが予算を超過しないように、コスト管理ツールを導入し、予算の進行状況を監視します。 - プロジェクトの進行状況を定期的に評価し、問題が発生した場合には早期に対処します。 4. コミュニケーションと透明性: - プロジェクトマネージャーとの継続的なコミュニケーションを確保し、プロジェクトの進行状況とリソース要求を把握します。 - 経営陣に対して進捗状況とリソース割り当ての透明性を提供し、意思決定をサポートします。 5. 継続的な改善: - プロジェクトマネジメントプロセスを継続的に監視し、効率性を向上させるための改善策を導入します。 - プロジェクトの成功と失敗から学び、将来のプロジェクトに適用するためのベストプラクティスを文書化します。 6. AIの活用: - AIを使用して、各プロジェクトの進行状況を監視し、期待ROIとの比較を自動化します。 - リソースの最適な割り当てをAIツールを介して提案し、リアルタイムで最適化します。これらの戦略を組み合わせて、プロジェクトの優先順位付けとリソースの最適な配分を実現し、企業の業績を最大化し、各プロジェクトのROIを向上させることができるでしょう。また、AIツールを活用してデータ駆動の意思決定をサポートすることが、より効果的なプロジェクト管理に役立つでしょう。このような詳細な戦略提案は、無料版のChatGPTでも十分に得ることができます。ただし、有料版を使用することで、より高速かつ高度な分析と提案が可能になり、より複雑な状況にも対応できるようになります。まとめ限られた人材・資金リソースを効果的に配分し、ROIを最大化するための戦略立案は、現代のビジネス環境において非常に重要です。AIを活用したプロンプトエンジニアリングを用いることで、企業の特性やプロジェクトの詳細を考慮した上で、効果的なリソース配分と戦略立案を行うことができます。プロジェクト評価と優先順位付け、リソース割り当ての最適化、リスク管理の徹底、コミュニケーションと透明性の確保、継続的な改善プロセスの導入、そしてAIの活用によるデータ駆動型意思決定など、多角的なアプローチを組み合わせることで、企業の業績を最大化し、各プロジェクトのROIを向上させることが可能となります。 AIツールを効果的に活用することで、より精度の高い分析と戦略立案が可能になり、企業の競争力向上につながります。ただし、AIはあくまでもツールであり、最終的な判断と意思決定は人間が行う必要があることを忘れてはいけません。AIと人間の知恵を適切に組み合わせることで、最適なリソース配分と戦略立案が実現できるのです。 [PR] Webデザインで副業する方法とは生成AIの実務活用で悩んでいる方へ ChatGPTなどの生成AIを業務に取り入れてみたものの、思うような結果が得られない。あるいは、ビジネスでの活用に限界を感じている。そんな方々にお勧めしたいのが、『テックアカデミーGAIナレッジベース』です。このコミュニティは、生成AIの実務活用に特化した知識と経験の宝庫です。以下のような特徴があります。 500件以上の実務で即活用できるプロンプト集プロのエンジニアに生成AIについて直接質問可能同じ関心を持つビジネスパーソンとの交流の場通常、このレベルの生成AIコミュニティには10万円程度の費用がかかります。しかし、『テックアカデミーGAIナレッジベース』は完全無料でご利用いただけます。生成AIの可能性を最大限に引き出し、ビジネスの競争力を高めたい方にとって、このチャンスを逃す手はありません。今すぐ登録して、生成AIの実務活用スキルを飛躍的に向上させましょう。今すぐ無料登録

生成AI・ChatGPT

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

優れたデザインを作るための社内コミュニケーション術とは

ユーザーにとってのメリット

デザイナーにとってのメリット

エンジニアにとってのメリット

答えが思い浮かばないときには？

関連するキーワード

あわせてよく読まれている記事

具体的な方法を学ぶ！優れたアプリのデザインプロセスとは

事例から学ぶ！HubSpotがサイト改善に成功したUX戦略とは

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

【無料版OK】ChatGPTで簡単作成！効果的なプロジェクト報告書フォーマット

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

【無料版OK】ChatGPTが導く企業成長戦略：限られたリソースで利益を最大化

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

ユーザーにとってのメリット

デザイナーにとってのメリット

エンジニアにとってのメリット

答えが思い浮かばないときには？

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ