目次
プロフィールサイト制作
入学して2ヶ月目の初めに、2回目のクラス授業がありました。Figmaで作成したプロフィールサイトの3分間プレゼンです。制作時間やトレーナーチェック回数、フィードバック内容などを掲載します。
入学してからプレゼンまでの時系列
入学してから1ヶ月の過ごし方はこちらです↓
一週目：授業観る(概論)
二週目：授業観る(概論+Illustrator, Photoshop)＋初めてのクラス授業
三週目：授業観る(Figma)＋オンライン飲み会（私たち家族はここで3泊4日の旅行へ）
四週目：授業観る(Figma,HTML)＋トレーナー課題チェック(ここで初めて)＋担任トレーナーチェック（プロフィールサイト制作）
五週目：授業観る(HTML)＋トレーナー課題チェック＋担任トレーナーチェック（プロフィールサイト制作）
次の月の週初め：プロフィールサイトのプレゼン発表会
オンライン飲み会の場で、「四週目と五週目の担任トレーナーチェックでプロフィールサイト制作について話した方がいいよ」、と言われたのもあり、旅行から帰ってきてすぐFigmaまで動画を観終えてプロフィールサイト制作に取り掛かりました。
ただ、プロフィールサイト制作、と一言で言っても何を書こう？全然浮かばない。。。
課題上の制作条件が、こちらでした。
- メインビジュアル
- 地図の掲載
- 3つのコンテンツを横並びさせる
今までのデジハリの学生さんたちのXでのつぶやきやGoogle Chromeで検索して、どんな感じの制作物かを確認させていただきました。（掲載いただいている方々、ありがとうございます。）
誕生日や好きなもの、出身地、制作物などを挙げたり、人によっては私の好きな出身地の特集。みたいなページにしたりしていました。
旅行から帰ってきた私は旅行楽しかった〜！しか考えられない脳になっており、これはみなさんにおすすめしなきゃ…！という念みたいなところから、沖縄特集サイトみたいなサイトの制作に取り掛かります。そんな感じのサイトを作ってる人もいたし、とプロフィールとは言えないサイト制作を始めました。笑
初めて自分の制作物を見せる機会だったので、ダメ出しありきでいいや、と考えていたところもあります。
なので旅行サイト制作は作り込みしすぎず、2日でワイヤーフレーム制作とデザイン制作の大枠を作成して持っていきました。
コンセプト決定まで
担任トレーナーチェックによる、案の定のダメ出し…
1回目の担任のトレーナーチェックはで、コンセプトとデザインを伝えたところ、開口一番、「これはプロフィールサイトなのか？？」というダメ出しをいただきました。はい、おっしゃる通りです。
ターゲットをどこにするかというお話と、今まで見てきた印象深いプロフィールサイト、を教えてもらい、再度制作し直すことに。。。
相談したのは旦那さん
この歳にもなってプロフィールを書くとなると、何を書けばいいものか…。自分の好きなものってなんなのかもよくわからないし、書くのもちょっと恥ずかしいし、それだけ書いて終わり、というのも味気ないしなあー。自分を表す配色やフォントを設定してプレゼンするのも難しいーと周りのママさんや旦那さんに呟いていました。
そしたら、「みーちゃんは漫画が大好きじゃん。そして生肉もめっちゃよく食べるよねえー。」と生ハムをもしゃもしゃしていたところ、旦那さんがぼそっとコメントしてくれました。
そこからインスピレーションが湧いてきて…！漫画と生肉を軸にプロフィールサイトを制作しました！
自分を客観視することって難しいと思うので、家族や友人などに相談してよかったなと感じました。
そこからは漫画好きなので全体的にモノクロにし、吹き出しや枠線でコミック感を演出しよう…とアイデアが湧いてくるくる。プラス要素として、私の好きな食べ物を覚えてもらいたくて、生肉コンテンツを掲載しました。
制作期間
ダメ出し旅行サイト制作：2日、完成品制作：2日、トレーナーチェックを3人、担任に2回チェックをしてもらい、フィードバックもらったところにちょこちょこ改善点を入れて提出しました！
フィードバックは、戻るボタンつけてみる？、スマートフォンサイトの余白を多めにした方がいい、好きなものの中でも漫画だけプロフィールサイトのコンテンツとして使用するなら他より目立つような仕掛けを。1つのコンテンツに複数の文章を入れるのなら軽やかに読める工夫をして、などで、すごくタメになりました。
トレーナーチェックについて
完成前に方向性や、その時点での改善点を聞きにいく壁打ち、というのを、同じクラスのママさんがやっていました。なるほど。。。その概念がなかった…！！確かに、せっかく完成してもぐちゃぐちゃのサイトだとトレーナーもどこをどう修正していいかわからなかったりするし、早めに対策するの大事…！何事も報連相だということに気づかせてもらいました。とはいえトレーナーに「こんなことでコールしてもいいのかな…」と意味もなく考えてしまう方なので、他の課題チェックと合わせてトレーナーに3回ほどみてもらいました。人によっては「問題ないと思うよ〜」で終わる場合もありましたが、諦めずに見せ続けてると、プラスアルファするならこうするかな…などの多角的な意見ももらえて、やってよかったなと感じています！
制作に一番時間がかかったところ
それは全体的な写真補正とメインビジュアルの制作です。ここでテイストが決まると言っても過言ではない…。と思ってます。Photoshopに慣れていない私はどうにかIllustratorでメインビジュアルの大枠は作りました。写真補正は画像のサイズに見せたいものが全部入り切らないから奥行きを出したくて一画像に2〜3時間かかったのを覚えてます。
発表の練習
メタライフで仲良くなったママさん数名と発表2日前にタイムを測りながら練習をしよう！となり、プレゼン内容を箇条書きにしてまとめました。
喋ってみると、3分に満たなかったです…。育休に入るまで、会社では機械のようにプレゼンをすることが多かったのでノリでできるだろう、と浅はかな考えをしていました。デザインのプレゼンなんて初めてなのだから本気で取り掛からねば、と気づかせてもらいました。
練習を踏まえて、まず、箇条書きにしていたプレゼン内容をAIに読み込ませ、3分程度のプレゼン文章を起こしてもらい、少し修正を加え、次にNotebookLMに読み込み、AI音声にして当日は電車の中で2倍速で聞いてきました。
AI音声は、イントネーションや、漢字の読み間違いなどのツッコミどころもたくさんありましたが、自分のボキャブラリーとは違う言い回し方で読み上げてくれて刺激があります。
クラス授業での発表
クラスでは一人3分間のプレゼンです。話す内容としてはターゲットはどこか、このサイトのゴール、どうしてこのようなテイスト・フォント・配色にしたのか、気をつけたポイント、大変だったポイントなどになります。
これだけ頑張ったから早くみんなに見てほしい！という気持ちと、担任からダメ出しばっかりだったらどうしよう…うまくプレゼンできるかな…という、高揚感と緊張感でいっぱいでした。
練習した甲斐もあり、めちゃめちゃにダメ出しされるわけではなく、前回より良くなったね、とのお言葉をいただけました。あ、もちろん改善ポイントはいくつか頂いてます。けど、デザインを見せたことがなくて今後も仕事としてやっていけるのか、などの漠然とした不安が、ほんのちょっと軽くなった気がします。ひと段落です。ふう。
他のママさんのプロフィールサイトもみんなすごく綺麗で見せたい部分や覚えてもらいたい内容に合わせたデザインをされてて、プレゼンの仕方なども勉強になりました。
みんなのプロフィールサイトを見ることで、名前と顔が一致していなかったママさんたちの顔もバッチリ覚え、どんなプロフィールサイトだったかがとても印象強く残ってます。
まとめ
トレーナーにチェックしてもらうことでより良いプロフィールサイトになっていったし、とても愛着が湧きました。適当に作らなくて本当に良かったです…！本当に自分の作りたいものが作れた気がして気に入ってます。
制作実績にも内容掲載しました！
（これはプロフィール発表が終わった後に動画に掲載されていたjs/jQueryも付け加えてみたバージョンです。）
また、デザインを文字にして説明するのって大事だと改めて感じました。このデザインにした理由を、あえて文字にする、漫画っぽいと言ったらこれ、と当たり前に思っていることを話す、と言うことをしてこなかった私は、サイト制作自体は締め切りより1週間前には大方できていたのにプレゼンで話す内容が白紙に近かったです。私には当たり前、と感じていることでも、漫画を読んだことがない方やあまり知らない方にもわかりやすく伝えるために、なるべく詳しく言語化できるようにする必要があるなと感じました。
この後の課題でこのプロフィールサイトをHTMLで落とし込みをする予定です。ウェブ版とスマホ版でところどころあしらいが違うのでレスポンシブ対応がちゃんとうまくいくか不安ですが、頑張ってみようと思います！