苦労と工夫の経験がプレゼンに生きる理由

先日、コーポレートサイト課題を通じて得た気づきをブログにまとめました。
そのときは、上流設計からワイヤーフレームまでを作り、そこからデザインを起こす段階で手が止まったことについて書きました。

今回はその続きとして、実際にデザインに起こしている最中での苦労と工夫が後のプレゼンに生きる理由を書いていきます。

今週取り組んだ範囲

今週デザインを進めたのは、以下の4つのセクションです。

• Section1：選ばれる理由

• Section2：設備・施設紹介

• Section3：提供しているメニュー一覧

• Section4：挨拶セクション

ワイヤーフレームはすでに用意してあったので、「ここからどうやってデザインにしていくか」がテーマでした。

デザインに起こすまでの進め方

まず最初にやったのは、Pinterestで該当セクションの要素を大量に見ることです。
レイアウト、写真の使い方、余白の取り方、文字量などを眺めながら、
良さそうだと感じた要素を頭の中にストックしていきました。

その後、いきなりFigmaを触るのではなく、手書きでラフを描きました。

• このセクションには何が必要か

• どの情報を目立たせたいか

• どこに余白を取りたいか

そういったことを紙に書き出しながら配置を決めていきます。

手書き → Figma

手書きで整理した構成をもとに、Figma上で「なんとなく合いそうな画像」「使えそうな文字組み」を当てはめていきました。

このやり方をすると、装飾やあしらいを加えていく作業がかなりスムーズになりました。
いきなり完成形を目指さず、まずはそれっぽい形を作ることが自分には合っていると感じます。

できたら並べる

各セクションをそれぞれ作っているときは、それなりに良く見えるんですが、ファーストビューの下にSection1〜4を順番に並べてみると、全体としての統一感がないことに気づきます。

• 写真のトーンがバラバラ

• 視線誘導がおかしい、読みにくい

• 統一感のないあしらい

1つのWebサイトとして見る視点を意識しながら、各セクションを微調整する必要があります。

先週悩んでいた理由

この進め方をしたことで、先週あれだけ悩んでいた「ワイヤーフレームからデザインを起こす」という作業が、一気に楽になりました。

振り返ってみると、自分に足りなかったのは「デザインの引き出しの数」と「アウトプットの量」です。

考えるだけ、参考を見るだけでは、デザインは前に進まない。

先週はFigmaにあまり慣れていなかったので、頭の中の書きたいイメージを書き起こすまでの時間というものが長くて手が動かなかったんだと思います。
ただ、絵を描くことが好きなのでパソコンの右側にノートを置いて Pinterest を見ながらアイディアを手書きで出すのはすごくスムーズでした。
もし同じように悩んでいる方はツールにとらわれず自分が一番やりやすいアイディア出しの方法を見つけるといいかもしれません。

今後の予定

この後、残りの3セクションを作成し、一旦コーポレートサイト自体は完成となります。

その後は、完成したコーポレートサイトの提案資料（プレゼン）を作り、それをメンターの方に採点してもらうところまでが課題になっています。

このプレゼン資料は非常に苦労しそうなところではあるんですがコーポレートサイトのデザイン制作段階で苦労したりその苦労乗り越えるための工夫をすればするほど密度の濃いプレゼン資料になると思っています。

おそらく、このプレゼンが一番大変で、同時に実務で一番重要な部分だと思っています。

どれだけ良いデザインを作っても、それを相手に分かりやすく説明できなければ、仕事にはならない。
プレゼンが通るかどうかで、そのまま仕事になるかが決まる世界です。

だからこそ、「自分が悩んだこと、工夫したこと、大切にした視点」をすべて言語化し、図解や対比を使って伝える必要があります。

これから

スライド作成には NotebookLM を使う予定です。YAMLを用意することでデザインの統一感を保てることは、別の業務ですでに経験しています。

ですが、何より重要なのはシナリオ。そのためにも、コーポレートサイト自体を「仮で終わらせず、悩み切って、納得いくところまで作りきる」ということを大事にしていきたいと思っています。

補足：YAMLの作り方

いつも使っているスライドや自分の好きなスライドテンプレートをChatGPTやGeminiにアップロードして、この添付画像を元にYAMLファイルを生成してくださいというプロンプトを書くと、YAML形式で人間が理解しやすい構造化された以下のようなデザインシステムを生成してくれます。

design_system:

  colors:
    primary: "#2C8FD6"
    background: "#FFFFFF"
    text_primary: "#333333"
    text_secondary: "#666666"
    accent_light: "#E6E6E6"

  typography:
    font_family:
      heading: "Noto Sans JP"
      body: "Noto Sans JP"

    heading:
      weight: 700
      letter_spacing: 0.02em

    body:
      weight: 400
      line_height: 1.7

  layout:
    canvas:
      aspect_ratio: "16:9"
      margin:
        top: 64
        bottom: 64
        left: 80
        right: 80

    frame:
      top:
        style: "double_line"
        color: "#2C8FD6"
        thickness: 2
      bottom:
        style: "double_line"
        color: "#2C8FD6"
        thickness: 2

    section_number:
      style:
        background_color: "#2C8FD6"
        text_color: "#FFFFFF"
        size: "medium"
        border_radius: 4

    page_number:
      position: "bottom_right"
      opacity: 0.15
      color: "#999999"

  spacing:
    section_gap: 48
    block_gap: 24
    paragraph_gap: 16

  components:
    title:
      font_size: 48
      align: "left"

    section_title:
      font_size: 36
      align: "left"

    body_text:
      font_size: 18

    label:
      background_color: "#2C8FD6"
      text_color: "#FFFFFF"
      border_radius: 999
      padding: [8, 24]

  visual_style:
    tone:
      - clean
      - corporate
      - calm
      - trustworthy

    decoration_rules:
      allow_patterns: true
      pattern_opacity: 0.1
      prefer_whitespace: true

  constraints:
    - no_gradients
    - no_bright_colors
    - no_decorative_fonts
    - no_excessive_icons

このYAMLをNotebookLMのカスタムプロンプトに入力すると、以下のようなスライド資料を生成してくれます。PDFファイルで出力されるので、細かな変更をするためには工夫が必要ですが、そのまま使えるレベルで出力してくれるのは嬉しいところです。