制作実績

シンプルすぎないような工夫を

本案件では、サイトデザインを担当させていただきました。
信用や信頼を与えたいというご要望に対して、印象を大きく左右する色味やテキストに関しては、多くのパターンを検証した記憶があります。
個人的にシンプルなサイトをデザインするときは、シンプルになりすぎないようにいつも気を付けています。
シンプルかつ分かりやすくという点は抑えつつ、ページ毎のレイアウトに工夫を凝らしたりアニメーションを入れることで、全体的に寂しい印象にならないように意識しました。

コーダーさんとの2回目のチーム体制

前回の反省点を活かし、コーダーさんがコーディングをしやすいようなデザインデータを作るという自身への課題がありました。
改めて本や動画などを参考にしながら、デザインの初期段階から丁寧にデータを作ることを心がけました。
それまでは自分が分かればいいという自己流のデータの作り方であったため、この案件をきっかけにコーダーの方が理解しやすいデータを作れるようになったと感じています。
また、アニメーションも多く取り入れているサイトのため、アニメーション時の指示の仕方なども学ばせていただきました。

テキストじゃないコミュニケーションの大切さ

コーディングに入る前にコーダーさんから提案があり、事前の擦り合わせをしっかりと行いました。
また、疑問点があったときは短い時間でもzoomを繋いで直接話すことをお互い心がけていたと思います。
場面に応じて遠慮せずにコミュニケーションを取ることで、結果とてもスムーズに案件を進めることができました。
私自身としても、今後はコーダーの方とこういったコミュニケーションを取ろうと思えるような指針になった案件で、とても良い経験をさせていただきました。

前回の反省を踏まえ、行なった工夫

今回は襷ウェブでの2回目のご依頼でした。
前回は、デザイナーさんとのコミニュケーションについて反省点があったので、今回は事前に日程を決めてオンライン会議をメインにコミュニケーションを取るように工夫しました。また、デザイナーさんとの初回の打ち合わせ時に「どんなコーダーだと仕事がやりやすいか」と尋ね、プロジェクト進行がスムーズに進むように工夫を行いました。
その結果、デザイナーさんとの円滑なコミュニケーションができ、タイムパフォーマンスを実現することができました。今後もデザイナーさんと事前にコミュニケーションをとり、どのようにプロジェクトを進めるか確認を行なった上でコーディングをしたいと思います。

学んだこと

今回の案件で学んだことは2つあります。

1.アニメーションはキッカケや条件が大事
2.画像対応が最適な場合は、無理してコードで組まないこと

アニメーションはキッカケや条件が大事

このホームページは、いくつかのアニメーションを導入しております。例えば、コンテンツがふわっと表示されるフェードインアニメーションを導入していますが、最初このアニメーションが動くキッカケをスクロールのみにしたところ、別のページに移動した際に最初のファーストビューが表示されないという不具合が発生しました。なので、ファーストビューの場合は、画面が読み込まれた後（＝ローディング後）をキッカケにして表示されるように調整しました。
また、パソコンの際は画像が横に流れていくスライダーアニメーションにして、スマートフォンの際はスライダーではなくギャラリー式で画像を並べて表示させる箇所がありました。この場合はも、現在の画面幅を計算して、アニメーションさせるかどうか条件分岐させて実装しました。

画像対応が最適な場合は、無理してコードで組まないこと

次に、コーディングで再現するにはちょっと難しい図は無理してコードで組まず画像を活用することを学びました。サービス紹介ページにて、生産者から消費者へどのような流れで食材が届けられるかを表現した図があり、これを分解してコードで組むのは非常に難しいなと感じてました。その旨をメンターのコーダーさんに相談した際に画像にしてもいいことを教えていただきました。コードで組めば恐らく数時間かかるようなことが、画像で対応したことで時短になりました。
これからも予算や時間が限られている場合は、無理してコードで組むのではなく、画像にして対応できないかを考えて、判断したいと思います。

最後に

今回の1番の成果は、前回の反省を活かし、デザイナーさんと円滑なコミュニケーションができたことです。経験が少ないからこそ、自分のやり方や考えを押し付けるのではなく、デザイナーさんに寄り添い、どうすればいいクリエイティブができるのかを相談しながら進めることの大事さを学びました。今後もデザイナーさんに寄り添い、円滑なコミュニケーションができるように努力したいと思います。