to TOP

ORDER

タイトルアニメーション / ロゴ

投稿日:2022/9/28  更新日:2022/10/22

アクアリウム、水槽に関しての情報を発信しているサイトのタイトルとロゴの作成

title
  • 作成期間:1週間
  • タイトル(できればアニメーション)とロゴ。ロゴはアイコンに他のSNSにも使用予定(◀︎制作過程で決定)
  • ブログのターゲット:アクアリウムに興味のある方。年齢は男性30代〜。
  • きっかけ:web繋がりで知り合い、卒業サイトのSVGのアニメーションタイトルを見て。
  • 制作ツール:illustrater(macbook) Procreate(iPad) DreamWeaver VScode

<補足>
このタイトルロゴはお世話になっている方の運用しているサイトからもご覧いただけます!タナゴの飼育方法のほか、水草などアクアリウムに関するについても紹介されています!気になった方は以下のボタンから覗いてみてくださいね♪

Artworks

SVGアニメーション

sketch

ロゴ・タイトルセット

ブログのタイトルサイズから横むきに配置。

フォントは元々明朝体が採用されていたが、ブログのテーマ内容と全体の印象を考えてゴシック体を採用

泳いでいる時の印象とバラタナゴのヒレの透明感を出すために色とは別に後から白いシルエットを入れている

制作の流れ

ヒアリング

sketch

ヒアリングと言っても、雑談から始まりました(まさかこうなるとは思いもせず・・・)。私の運営サイト「人から詠み継ぐ百人一首」 のSVGアニメーションタイトルから始まり、依頼者ご自身の運営されているブログのタイトル、作れないか・・・? という流れがきっかけとなりました。お話を聞くと相当『 魚愛!! 』が強く、(ブログに興すほどですもんね) タナゴの特徴を活かしたいご意向が見られました。それをなんとか活かしたい。と言うところから始まります。

スケッチ・大体の方向性

sketch

魚に関しては素人。(婚姻色とは、のレベル。えっみなさんご存知?)とにかく資料とY◯U Tubeを漁り、 魅力や特徴を調べたのちに、大体こんな感じ、というスケッチを提案しました。キャラものコミカルものから 少しリアルなものまで幅広くかき、方向性を決めてもらいました。※今回はよりリアルに近いものとなりました。
ブラッシュアップでご提案をいただいたのがかなり助かりました! (写真を添えての細かいグラデーションの説明はイメージしやすくて助かるのです。 そうではない場合はこちらからいろんな提案ができて幅広い引き出しもらえるからそれも好きです。)

補足※興味を持った方だけ読んで!:今回の魚に選んだのはバラタナゴです。「日本が誇る世界最小の釣り(らしい)で、淡水魚。美しい鱗と色味の微妙なニュアンスを楽しむことができる身近な観賞魚で『川の宝石』とも言うそう。」 ・・・そこまで言わしめるのならロゴに「宝石の要素入れたい」となり、シンプルが常のロゴにリアルさが出てしまいました。 シンプルだと遠目からだったり、また覚えてもらいやすいですしね。でも親しみやすさを考えるのなら多少イラストちっくに(以下略) ・・・そして自分の魚素人がイラストに出てたところをすぐに見破られ撃沈。腹ヒレと尾ヒレなんて考えたこともなかった・・・

作成(Ai / Dw / VScode)

Pcでデザイン興し

手戻りはありつつ、大体形が固まればPCを動かしていきます。(MacBookとAi)ブラッシュアップとスケッチをもとに書き、提案通りかどうか連絡をとりながら少しづつ詰めていきます。 (連絡方法:LINE)

※この作成の間にIllustratorからSVGにして→そのコードをVSコードに移し、HTMLに仕上げる・・・など色々複雑で専門的(?)な内容が入ります。反応あればまたその内容は動画か何かでまた残したいと思います。
※HTML→SVGに直せたのは有力情報!依頼者様との時間もこれでだいぶ稼げた
?他のページに行くと普段ならもう一度SVGが始まるのに、それがないのはなんでだろう?

完成・手直し

Pcでデザイン興し

手戻りはありつつ、大体形が固まればPCを動かしていきます。(MacBookとAi)ブラッシュアップとスケッチをもとに書き、提案通りかどうか連絡をとりながら少しづつ詰めていきます。 (連絡方法:LINE)