ついに完成 | のりべん島webサイト計画
こんにちはこんにちは。梅雨嫌ですねー、家の中に洗濯物が吊るされている時点で嫌ですねー。お元気ですか。
こちらではしばらく潜っていましたが、毎日VS codeやらPremiereやらと格闘していました。その間約１週間…！ようやくwebサイトが出来上がったのでお披露目記事です。検証に付き合ってくれた夫や友人ありがとうございます！
何を隠そう、自分でサーバーを借りてファイル揃えてアップロードして公開するって、実は初めてで…。職業訓練校時代は仮想サーバで終わっていたし、講師時代は授業課題やWPテンプレートテーマをいじる程度だったので、なんかすごく感慨深くって興奮しています。本番のポートフォリオサイトよりも作品が先にできてしまったけれど、まぁいいかぁ。
ざっとですが、備忘録も兼ねて制作時間を振り返っていこうと思います。
プランニングシート作成
記事はこちらを参照してください。作成時間は４時間程度。この４時間に至るまでに他社研究やUIトレースを行いましたがその時間は割愛します。
ワイヤーフレーム作成
記事はこちらを参照してください。作成時間は６時間程度だと思います。
デザインカンプ作成
記事はこちらを以下略です。作成時間は12時間程度になるかと思います。
というのも、コーディングしつつ「あ、この要素ないから作らないとな」っていうところがポコポコ出てきたので、結構行ったり来たりしていました。多分その時間を加味すると12時間程度かなぁと思います。map部分作るの３時間くらいかかっているはずなので…。３時間かけてこれなのが納得いってないので、面接！とかになるまでにもう少し手を加えていく予定です。
コーディング、動画・画像データ作成
作成時間は30時間程度です。うち6時間は動画作成。初めてPremier触って、と考えると自分では検討したのではないかと思います。
動画に関して言うと、PCで見るとテロップでかめだけどスマホで見るとちょっと小さいくらいでちょうどいいんじゃないかなと思っています。この具合加減が難しいですね。今回はモバイルファーストで作ったのでPCは目をつぶりました。実際PCで見ると画質も少し荒いし。エフェクト等もほぼないし、フィルムディソルトしか使ってないし、もっといろいろといじってみたいなぁと思いました。満足はしていますが納得はしていません。あるあるですね。
以下はひさびさのコーディングにあたっての感想です。
・slickありがとう
まじSlickありがとう。神だわ。やりたいこと全部できました。
・モーダル作ってくれた人もありがとう
CSSだけで実装できるmodalがあったからこそこの時間でコーディング終わったんじゃないかなって思ってます。ありがとうございました。CSS書き写しながら（覚えたかったので写経した）、「はっえっ…あーっ、すごい…っ！」とか一人感嘆の声が止まりませんでした。
・夫と友人にありがとう
夫にはPremierの使い方を教わりました。夫は「inDesignやコーディング教えてもらったから恩返しできてよかった」といってくれましたが、そんなことないよいつもお世話になっているし。本当にありがとう。あなたがいないままでは今も動画部分は変な画像が入っていました。
友人２人は公開前の検証をしてくれました。「すごい」「素敵」とモチベを上げてくれるフレーズを連呼しつつも「ここはこうだといいなぁ」という第三者の目線をくれました。本当に助かりました。あとTwitterでぼやいた時もお師匠さんが速攻でリプくれたのも嬉しかったです。みなさん本当にありがとう。
・任天堂様ありがとう
今回の作品は任天堂の「あつまれどうぶつの森」があったからこそ、そしてスクリーンショットや動画をつかってもいいよ、という利用規約があったからこそできました。やっぱり根幹となる素材がクオリティ高くないと全然ダメだと思うんですよね、こういったダミー系のサイトって。見た目や動きなんかがどんなに派手で素敵でも、コンテクストがいまいちとすぐ伝わっちゃう。なので今回素材が使えたことはものすごくありがたかったです。一生ついていきます…。
コーディングしていると、やりたいことがバチっとかけた時に「私天才だな」とか思う瞬間があるのですが、今回は残念ながらありませんでした。なぜならやりたいこと全部外部（slickとかmodalとか…）にお世話になったからです。あの瞬間が気持ちいいんだけど、あの瞬間がなくてもやっぱりコーディングは楽しかったです。
あと意外だったのが、デザインが楽しかったこと。今回「自分の作りたいものを自分でオーダーして自分でつくる」だったから楽しかったんだろうなぁ。zine作っている時と似ていました。でもやっぱりデザインに関しては「自分まだまだだなぁ」と思うことが多いので、グラフィック系で仕事を探す時はオペレータ系の業務の方が性に合っているだろうなぁと思います。AIやPS、XD触るのは大好きなので。理想はコーダーのパートタイマーです。
今後の予定
動画はゲーム内で冬のシーンも撮れるようになったので、また時間を見つけて改良していきたいところです。ビーチ走るシーンが無駄に長い気がする。
あとAdobeFonts使いたいがために選んだ筑A丸ゴRが、モバイルで見るとちょっと細すぎる感じがするので変えます。Boldくらいでもいいんじゃないかと思うのですが、本文Boldにすると今Bold使っているところが本文と一緒の太さになってそれはそれで嫌なのでどうにかします。Montserratとの相性も良くないし。何がいいかな。それとブログ部分押した後、青背景に時間差で角丸がつくの気持ち悪いです。あれもどうにかしなきゃ。ほかをタップしないと元の写真が出ないのも嫌な感じです。あとはMAPの一枚絵をどうにかこうにか…。バナーも突然出てきている感が否めないので何か加えたいと思っています。しまった問題が山積だ。
あとは前述したのですが、デザインからコーディングに移って、組んでいって不具合見つけてデザインに戻ることが結構ありました。それこそmodal部分とか全然作ってなかったし。次の作品を作る時は、そう言うところもしっかりと想定して作り上げていかないとなと痛切しました。これはとてもよくなかった。
と言うわけでまだまだ課題はありますが、公開していても大丈夫そうな段階まで来たので今回（時間とか忘れないうちに）記事にまとめました。iPhoneX、iPad、MacbookPro15inchでしか検証もしていないので、Win機やAndroidで見たときのコメントとかいただけるとめっちゃ嬉しいです。ここまで読んでくださりありがとうございました。なんとか今月中にほかのポートフォリオ素材作って就活7月には始めたい…！かねがない…！ほしいものしかない…！ではまた。
ポチる前にそのお金であったかい飲み物買いましょう。