デザインのスキル

交通拠点の案内システムを題材に、卒業制作の課題・制作過程・成果をHTMLスライドへ整理。付箋風のデザインで、審査員に貢献と根拠を伝える発表資料を作ります。

• 卒業制作の審査発表を準備したいとき
• 案内システムの制作過程を伝えたいとき
• 制作の根拠と限界を整理したいとき

京都の桜旅の写真と言葉を、到着から満開、心に残る瞬間へとつながるHTMLスライドに編集。レトロな日本のカセット包装風デザインで旅の物語を伝えます。

• 友人に桜旅の思い出を共有したいとき
• 旅行読者向けの写真紀行を作りたいとき
• 旅の記録をレトロな資料にまとめたいとき

メモや分析資料を、顧客向け提案や技術発表に使えるHTMLスライドへ整理し、テーマ選択から発表者用の台本、PNG出力まで支援するスキル。

• 分析結果を顧客向け提案にしたいとき
• 台本付きの技術発表資料作成
• 製品発表用のスライド作成

既存の保険会社のデジタル変革を、現状診断・施策の順序・実行体制まで整理したHTMLスライドにまとめます。経営陣の意思決定に向けた資料づくりに使えます。

• 保険会社のデジタル変革計画の提案
• 施策の優先順位と実行順序の説明
• 経営陣の意思決定に向けた資料づくり

新聞や雑誌の特集ページ風に、長文を読ませる一枚のHTMLポスターを制作。大きな見出しと6つの番号付きセクションで、意見や発表内容を組み立てます。

• 発表内容をポスターにしたいとき
• 活動理念を一枚にまとめたいとき
• 新聞風のエッセイポスター制作

シニアデザイナーの面接に向け、3つの制作事例と判断の根拠を採用担当者に伝えるHTML資料を作るスキル。黄のアクセントと高密度な誌面風レイアウトで構成します。

• シニアデザイナー面接の作品集発表
• 3つの制作事例を整理したいとき
• デザイン判断の理由を伝えたいとき

アプリの歓迎画面、価値を伝える画面、サインイン画面を、3台のスマートフォン枠で横並びに作成。初回利用の流れを1枚のHTMLで確認するスキル。

• 瞑想アプリの初回案内を作りたいとき
• アプリの価値の伝え方を検討したいとき
• 歓迎からサインインまでの流れの提示

未着手・進行中・レビュー中・完了の列にタスクカードを並べ、担当者や見積もり、スプリントの進捗を見渡せるカンバン画面をHTMLで試作するスキルです。

• チームのスプリントボードを試作したいとき
• 担当者と見積もりを一覧する画面設計
• フィルターや検索付きのボード画面の検討

フィードやプロフィール、決済など6種類の画面構成を使い、iPhone 15 Proの端末枠に収めたアプリ画面をHTMLで作成するスキル。

• フィードやメッセージ一覧の試作
• プロフィールや商品詳細の検討
• 決済画面や歓迎画面の提示

結婚記念日に夫婦の10年間を振り返る写真と文章のHTMLスライドを作成。黒地にピンクとクリーム色を合わせたデザインで、思い出や転機を家族や友人に伝えます。

• 結婚記念日のフォトエッセイ作成
• 10年間の思い出と転機を振り返りたいとき
• 夫婦の歩みを家族や友人に伝えたいとき

チームの主要指標、7日間の推移、活動履歴、タスク一覧を、Notion風のHTML画面にまとめます。手動・自動更新に対応し、未接続時はサンプルデータで表示します。

• チームの指標とタスクを一覧したいとき
• Notion連携のダッシュボード作成
• サンプルデータでのオフライン確認

羊皮紙風の背景と青いインク色を使い、白書やスタジオ紹介を紙面のように整えるスキル。日本語・英語・簡体字中国語に対応し、単一のHTMLにまとめます。

• スタジオの紹介ページを作りたいとき
• 白書を一枚のWebページにしたいとき
• 指標付きの日本語紹介資料を作りたいとき

文化誌の刷新案やブランド提案を、ピンク・クリーム・バーガンディの3色と書体の対比でまとめるスキル。統一した誌面風のHTMLスライドを作成します。

• 文化誌のリニューアル提案
• ファッションブランドの資料作成
• 編集デザインの方向性レビュー

街の商店の写真や声を、紙の小冊子のようなHTMLスライドにまとめます。ベージュと緑の手作り感あるデザインで、地域の変化を伝える構成を整えます。

• 消えゆく商店を記録したいとき
• 地域の人物写真や声の紹介
• クリエイターの作品紹介

写真スタジオの代表作品、制作の流れ、料金プランを、黒と鮮やかな黄色のHTMLスライドにまとめます。見込み客が依頼内容を検討するための提案資料を作るスキルです。

• 写真スタジオの作品を紹介したいとき
• 見込み客に料金プランを説明したいとき
• 制作会社の提案資料を作りたいとき

回転する文字や地球儀、速度の異なる複数のレイヤーを組み合わせ、CSSで動く16:9のヒーロー画面を制作。動画書き出し用のHTMLにまとめます。

• マーケティング用の動くヒーロー画面制作
• 文字が動くタイトルカード制作
• リングと地球儀のループポスター制作

ブランドの説明をもとに、紙の質感とコラージュを使った雑誌風の縦長ランディングページを作るスキル。画面幅への対応やスクロール時の動きも組み込みます。

• ブランドの紹介ページを作りたいとき
• スタジオのサービスと実績を紹介したいとき
• 仮画像でページ構成を確認したいとき

ロゴ・配色・書体と運用ルールを伝えるブランド発表用のHTMLスライドを作成。クリーム色の背景と多彩なアクセントを保ち、顧客やチームの検討資料に整えます。

• アウトドアブランドのデザイン発表
• 制作会社の提案資料作成
• 顧客とのブランド案レビュー

音楽祭のポスターシリーズを、コンセプトから各媒体への展開まで説明するHTMLスライドにまとめます。太い枠線とずらした影を使う統一様式で、事例紹介や提案資料を作ります。

• 音楽祭ポスターの制作事例を発表
• ブランドの表現ルールと媒体展開の説明
• 視覚表現の強いポートフォリオ作成

人文学の講義や研究発表に向けて、資料・論点・根拠を整理したHTMLスライドを作るスキル。濃紺と暖かな黄色を使い、落ち着いた学術的な見た目に整えます。

• 人文学の講義資料を作りたいとき
• 大学院ゼミで研究発表したいとき
• 研究の要点をスライドにまとめたいとき

野外調査の卒業研究などを、研究の貢献・根拠・限界が伝わるHTML発表資料にまとめます。黄色い紙と安全ピン、手書き風文字を使った温かみのあるデザインです。

• 野外調査の卒業研究を発表したいとき
• 定性的な調査結果の発表
• ワークショップの振り返り資料作成

研究報告や社内レビューを、紙面風の落ち着いたHTMLスライドにまとめます。濃い青と紙色、セリフ体で章や数値を整理し、横スワイプやキー操作で閲覧できます。

• 研究設計・結果・限界を研究室で報告したいとき
• 四半期の社内レビューをまとめたいとき
• 日本語の研究発表資料を作りたいとき

ガイドやAPIリファレンスの画面を、ナビゲーション・本文・目次の3列で設計し、コード例や表も含む単一のHTMLページとして試作するスキル。

• APIリファレンスを試作したいとき
• コード例付きのチュートリアル作成
• 目次付きガイドの画面設計

管理・分析画面の試作を、単一のHTMLファイルで作るスキル。既存のデザインに沿って、主要指標のカードやグラフ、表を備えた画面を組み立てます。

• 売上ダッシュボードの試作
• アクセス・利用状況の分析画面の検討
• 運用状況を確認する管理画面の設計