集まれCF作品!ウルトラワークス
38期 川添さん

架空とは思えないコンテンツ量!
癒やしのアクアリウムサイト

「アクアファクトリー」
アクアリウムサイトのモックアップ
このサイトを作った人
川添さんアイコン
川添有祐(カワゾエユウスケ)
クリエイターズファクトリー38期
動物占い:タヌキ

SEとして14年勤めた後、34歳で退職。現在は本業無職、副業Webデザイナー。
ブログやLINEスタンプ販売、Kindle本の販売などいろんな副業を試す中、YouTubeを見てWebデザインの勉強を開始。独学で1、2ヶ月デザインをして、クラウドワークスにも挑戦する。コンペや案件に1件ずつ採用される中、自分が上手いか下手かもわからず、プロのフィードバックを受けたいと思いCFに入学。
趣味は漫画(「湯神くんには友達がいない」「ブルージャイアント」「お茶濁す」)

かたくなに無職を言い張りますよね、デザイナーは副業なんだ(笑)

今回取材するのは川添さんのアクアリウムサイト。こちらは架空のサイトだが、川添さんが全て一から考えたもので、架空とは思えないほどのコンテンツ量が話題だ。川添さんは熱帯魚に一時期ハマり、家に水槽がMAX3つあったときもあるとか。ちなみに一番好きな魚はSNSアイコンにもしてる「インペリアルゼブラプレコ」らしい。

こちらがインペリアルゼブラプレコ。憧れはあるが高価なため手を出せなかったらしい

「インペリアルゼブラプレコ」、なんか頭良さそう。

めっちゃ可愛い魚ですね!

サイト制作にあたり意識したこと

アクアリウムが趣味の人って基本男性が多いんですが、もっと女性の方にも楽しんでもらいたいと思って、「女性客を増やす」というコンセプトでやりました。
サイトの見た目もアクアリウムのかわいらしさや癒やしを表現することを意識しました。初心者にもわかりやすいよう、下層の「初めての方へ」というページを見ると導入の流れがわかるよう設計しました。

男性客が多い中、そこをあえて「女性客向け」としたのは、川添さんの挑戦だろう。アクアリウムに馴染みのない私でも、サイトを見ると費用や魚の世話など詳しく書かれており、とてもわかりやすい。初めてのユーザーがサイトを訪れて、「初心者はここを見ればいいんだ」というページがあるのは心強い。

デザインでこだわった点は、サービスページの「納品までの流れ」の矢印が魚になっているところです。他にも波を表現している箇所で、波が揺れるスピードにかなりこだわりました
フォントも解星デコールを使ってかわいらしい印象にして。単純に試してみたかったというのもあるけど、アニメーションで魚がふわっと出てきたりして楽しさを表現しました。

矢印を魚にするなど、サイトのちょっとしたところにも川添さんの遊び心が感じられる。魚や波が動く仕掛けなど、まるでサイト全体がアクアリウムかのような世界観がすばらしい。講師の森下先生からは、「ずっと見ていられる」と感想をいただいたそうだ。

矢印がお魚でかわいい。細部に至るまで世界観を崩さない

制作過程で苦労したことや成長したこと

苦労したのはコーディングで、さっき言ったように波のスピードがしっくりいくまで時間がかかりました。あとは、SNS(インスタ・X)の幅を調整するのに苦労したので、先生に助けてもらったり。レスポンシブの中間デザインも難しかったです。
その分成長したのもやはりコーディングかなと。どんどん慣れてきて、最後の方はすっきりとまとめたり、効率的な書き方ができたのではないかと思います。

どうやったら波だということが伝わるか、アニメーションのスピード設定も細かく微調整されたそうだ。アニメーションの動きって見れば見るほどわからなくなるのは私だけだろうか。コーディングに関しては、他の方へのインタビューでも成長したと感じてる人が多い。コーディングはやればやるほど慣れてきて、応用が効く部分が多いのだろうか。

本当に魚を見てるみたいなアニメーションですごく癒されます。

私もサイト拝見しました!フワ~って魚ちゃんたちが寄ってくるような動きがめっかわ!🐡💛

ちょっと後悔したのは、サイトのページ数が多く完成まで時間がかかったことです(笑)初めての個人制作だったので納期はあえて決めずやってみました。

たしかに架空サイトで全10ページもあるのはなかなかのボリューム。一ページごとの情報量も多く、「お客様の声」や「よくある質問」もあってとにかく満足感がすごいのだ。川添さん自身ブログをされていたこともあって、文章もわかりやすい。

サイトを訪れるとお魚たちがふわっと出迎えてくれる

Webデザインの魅力と今後の目標

デザインの魅力…完成したときの達成感でしょうか。プラモデルとなんとなく似てる感じがします。いろいろ試していって、ピースがハマっていく感じが楽しいです。
自分はブログをしていたのですが、構成を考えたり読者のことを考えて記事を書くときと感覚が似ている気がします。

「デザイン≒プラモデル」という表現はおもしろい。試行錯誤の末にこれだ!と思うカタチに仕上がったときの喜びや達成感は、たしかに通ずるものがありそうだ。メンターの久保さんも「アイディアを積み重ねて、カタチが見え始めたときが楽しい」とおっしゃっていたが、まさにそんな感じなのだろう。
本業は無職だと言い張る川添さん。今後はWebデザインをどのように活かしていくのだろうか。

たしかに似ている!

引き続きマイペースにやっていきたいです。自分は向上心がある方ではないので、そんなに強い願望とかはなくて。デザインも、仕事じゃないから楽しいって思えてるのかも。フリーで一度やってみてダメなら、どこかでアルバイトとして所属して、ぼちぼちやっていこうと考えています。

川添さんは向上心がある方ではないと謙虚におっしゃっているが、いつも課題やチーム制作などで、デザインと丁寧に向き合っているイメージだ。授業が終わっても、特別講座のコーディングGYMとデザインGYMの両方を受講し、いろんなイベントにも参加する姿を見かける。これからも川添さんのペースで着々とデザイン力を上げていくに違いない。

交流会で大阪に来られた時は、一人大阪探訪記ツイートをされてました。いつか案内してあげたい。

川添さん、ありがとうございました!

この記事を書いた人

シロクマ
SHIROKUMA
クリエイターズファクトリー35期生。ガリ勉部部長、大体顔見知り。
お好み焼きとシロクマが好き。Webデザイナー目指して転職活動中。

Contact

シーエスマガジンへのお問い合わせ
KIMURA・HARIMOTO・SHIROKUMAへのメッセージなどは、各XのDMにてお問合せ下さい。

クリエイターズファクトリー

クリエイターズファクトリーとは、
卒業なしで通学・オンラインでも学べる実践的なWebデザイン制作スクール。
転職や副業など目的別で勉強後のサポートもしています。