
絶望的なデザイナーだったけど、自主制作で救われた話。
今、趣味で作っているWebサイトです。
目指した方向性は「一切、アニメーションしない、硬いWebサイト」でしたが、気づいたら不要なまでにアニメーション多めのWebサイトになっています。そして、僕自身まだまだ発展途上。さらに成長したいと思っています。
制作中。
— 牧瀬 誠也 | UX / CMS Developer (@choooose_org_) June 23, 2024
液晶漏れのようなオーバーサイズボタン
この動きを再現するjsは書けないため、マーブル状の画像を CSS の Transform matrix3d で引き伸ばして、画面スクショを取ります。フォトショで、繋ぎ目を無くして、繋がっているように見せてます。(ホバーのアクションは不要かな?) pic.twitter.com/K3hNJsegQR
本題に戻ります。
僕が自主制作で成長出来た理由です。
僕は、Webデザイナーとしての上司が1年しか居たことがありません。デザイナーとしてのマインドと、デザインについて教わりましたが、技術はまだまだでした。
そして当時の僕は、
•デザイン出来ない
•デザインの勉強してない
•勉強法もわからない
•クオリティが高いサイトも知らない
本当に絶望的なデザイナーでした…。
時代の流れもあり、今の僕と比べると当時の僕のWebデザインは、目も当てられないレベルです。それでも、自主制作を通じて試行錯誤を繰り返すことで、成長を実感することが出来ました。
それがなぜなのかを言語化してみました。ゆるく見てください。
僕の中での自主制作とは(仮定)
今までに制作したことが無いジャンルのWebサイトをデザインすること
(制作経験が無ければ無いほど良い)やってみたい、憧れる。そういった心が動くWebサイトを参考にすること
まぁ、最後まで完成しなくてもいい
モチベーションが無いときは作らない
そして自主制作の範囲は、デザインと構築、公開までとします。僕は、自分でデザインしたものを自分で構築したいタイプだからです。
ちなみに、2020年に初めて作ったWebポートフォリオです。英語を大きく使ったのも、パララックスも、スクロールに連動するのも、すべて全部初めてです。こういったWebサイト制作を経て、徐々に成長していきました。
今見ると恥ずかしいWebサイト。コーディングしながら作ったやつ。 とっても恥ずかしい。 pic.twitter.com/5PO0dqs3jp
— 牧瀬 誠也 | UX / CMS Developer (@choooose_org_) July 8, 2023
なぜ、自主制作で成長出来たのか。
先程の仮定を踏まえ、続きを読んでほしいです。
新しい視点をもって、デザインに挑戦できる
当時の僕の仕事内容は、既存のテンプレートをベースにしたWebデザイン制作でした。決まったレイアウト、カラム数に表層的なあしらいをするようなイメージです。そのため、デザインの発想に制限がありました。そもそも当時の僕は、良いデザインを知らないので、さらに良くないです。
しかし、自主制作には発想の制限がありません。
自分が「作りたい」と思えるサイトを参考にして、それを元に自由にデザインすることができます。利点は、実際に手を動かしながらそのサイトの構造や要素を深く分析し、理解を深めることが可能な点です。普段、見慣れないサイトを選ぶと、新しい発見が多く生まれてきます。
なぜそのレイアウトや色が選ばれたのかを考えることが大切です。頭の中で「なぜ、この配置なんだろう?」や「なぜこのフォントサイズなのか、どんな意図があるのか?」といった疑問を持ち続けることが、デザインの本質を理解するための第一歩です。
デザインは目的に応じて変化します。
今自分がなんのためのWebサイトを見ているのかを意識するところから始めましょう。そして、参考サイトのデザインの構造や意図を仮説を立てて制作することで、自分なりの答えを見つけることができます。この答えが、表現するデザインの考え方につながり、視点を広げることができます。分析を習慣にすると良いです。
優れたデザイナーは、良いデザインを知っていますし、情報収集もしています。それをしないと、何も始まりません。世の中には、ありがたいことに実績を持ったデザイナーが様々な情報発信をしています。そういった情報に触れに行くことは、視野が広がる行動の一つなので、とても大切です。
余談:自主制作の一環でWebサイトギャラリーも制作しました。はじめて、WordPressに触れた瞬間でもあります。ちなみに、数年で更新が続かなくなったので、すでにサイトは削除してます。
絞り込み検索の改良を行いました。
— 牧瀬 誠也 | UX / CMS Developer (@choooose_org_) June 8, 2020
・submit後も絞り込み状態を維持
・絞り込み検索中はCATEGORYに印がつく
・リセットボタンの追加
一旦、形だけ作れたので本番で公開しました。https://t.co/6xgUHLE9tI pic.twitter.com/EVCyMb4c5d
時間をかけて細部をデザインできる
参考にしたハイレベルなWebデザインと、自分で作ったデザインを見比べる…。なぜ参考サイトは、美しく見えて、自分でデザインしたサイトは、ださいのか研究しましょう。
このギャップを埋めていく & 参考レベルに近づける過程が非常に重要です。
どこに改善点があるのか考える過程で、普段なら気づかない細かい配慮に気づき、無意識に「感覚」が身につきます。この過程では、視線誘導や余白の使い方、フォントサイズのバランスなど、デザインの本質的な要素を理解する感覚が養われます。
当時の僕にとってその過程は、とてもイライラする作業でした。「なんでこんなにダサいんだ!」と、いつも思っていました。それで、問題ないです。
自分に負荷をかけ、じっくり考えながら進めていくことが、結果として大きな成長につながります。僕にとって、何も考えずに作れてしまうデザインは、何もしてないことと同じです。
こうした過程をこなしていくと、次回にデザインするときは、思考の自由度が増えたことを実感出来ます。手を動かし、悩んだものほど、身体に残りやすいです。
「研磨→壊す→整える→研磨→壊す…→完成」というサイクルを繰り返すことが大切です。初めて挑戦した何十時間は、次にデザインするときは、数時間、数分で再現可能になります。蓄積です。
ちなみにこれが、2022年ぐらいに作りかけたWebポートフォリオです。一見シンプルだけど、ダイナミックなレイアウトに憧れていた事が伝わります。
うわ...wp_01ってなんだろうと思って開いたら、2,3年前に作っていたポートフォリオが出てきた。当時影響されていたもがもろに出てきている。 pic.twitter.com/r1suYN2MJZ
— 牧瀬 誠也 | UX / CMS Developer (@choooose_org_) January 20, 2024
エラーに出会える
ドメイン設定やサーバー接続といった技術的な課題に直面しても問題ありません。自主制作では、エラーの原因を特定し、解決する時間が十分あります。その試行錯誤を通じて課題解決への知識が蓄積されます。
「エラーを直すために検索 → コードを修正」この過程も繰り返すことで、技術的な理解が向上していきます。自分で、構築まで行うメリットは、表層的デザインと構築の両面からサイトを組み立てる力が身につくことです。
最初は「ドメイン?DNS?これってどうやって設定するんだ?」と困惑し、何度もサイトが表示されなかったり、思い通りに接続できなかったりしました。ですが、これらのトラブルを解決する過程を経験することで、いざという時にも焦らず対応できるようになりました。
最後に
今、趣味で作っている作っているWebサイトの制作の過程です。ツリーにしてますので、ぜひ見てみてください。
barba.jsリベンジ!過去に挑戦して6割ぐらいまで構築してそのまま放置...。今回は行くよ。 pic.twitter.com/j3oEDSNzik
— 牧瀬 誠也 | UX / CMS Developer (@choooose_org_) April 28, 2024
新卒時代の話です
最後まで読んでいただきありがとうございます。
スキとシェアをぜひ、よろしくお願いします。
3月、何の記事を書こうかな。