見出し画像

サイト制作を全部自分ですること - Web Development Galleryサイト Easesを作りました

どうも株式会社テルのテルです。先日、Easesと言うWeb Development Galleryサイトをリリースしました。個人での制作です。

この文章は、次回以降の個人制作の指針と誰かが個人制作する際、役に立つかなと思い書いています。

個人でサイトをデザイン、コーディングすべて行い公開って地獄ですよね、分かります。地獄でした。でも制作ドMなんで楽しかったです。

Easesは、こう言ったことを実現したいと思い作りました。
・もっとEasingが上手くなるための知識の集積
・フロントエンドのテクニック/コードの共有、トレンドの可視化
・WebエンジニアとWebデザイナーのコミュニケーション・コストの削減

アイデアが載っていて、コードが読めるサイトって好きなんですよね。目標は、日本版のCodropsみたいな誰かの役に立つサイトにしたいです。

サイト・コンセプト

主軸である、コードを載せるサイトと言うアイデアが初めにあり。アイデア1つではもちろん退屈なので「もう1つどんなアイデアを組み合わせるか」と言うところから制作はスタートしました。

このコンセプトを作ることに1番時間を使いました。フォルムがしっかりしていないと、どんなに細部を詰めてもクオリティは上がらない。

様々なアイデアを1人でブレストしては、手書きのワイヤーフレームにして
「これはここが良いが、その逆のこの部分が良くない」を何度も行ったり来たり、繰り返しました。

名前とサイトURLを同時に考えました。下記、当初考えた候補案です。

sr.cz(ソーシーズ)- ソースコードだけのサイト
srcsandbks.jp / bookandscri.pt(ソースアンドブックス/ブックアンドスクリプト)- ソースコードと近い主旨の本を紹介するサイト
downscri.pt(ダウンスクリプト)- 書き落としみたいな名前がカッコよいと思った
designandscri.pt(デザインアンドスクリプト)- デザインを主軸に、それを実現するためのコードを乗せるサイト
graphicandscri.pt(グラフィックアンドスクリプト)- グラフィックデザイン勉強していたので、コードと絡めて何かできないかなのサイト

普段なら、こう言ったアイデアの種を友達に話すところですがコロナで誰にも会えず、酒を飲みながら粛々(悶々)と考えました。(あまり相談しないでガーッと作ると言うのもこれはこれでありだったなとは思います)

そういったブレストの結果の1つがEasingでした。「必ず気持ち良いEasingと言うものは存在していてその答えは1つではなく、サイトのジャンルやデザインで変化するもの」

その感覚を捉え使うことが上手いエンジニアがたくさん存在し常にそれに嫉妬していたので「よし!これをやろう!」最終的にシンプルで覚えやすいEasesと言う名前に落ち着きました。

サイト・デザイン

画像1

ベースのみPSDで作成し、あとはコーディングで取り込む形としました。SPに関してはTOPのみ作成。

コーディングするのは自分なのでルールさえある程度、頭に入っていれば
見た目で調整でき、物凄く崩れると言うこともない。

デザインの工数はかなり削減し、迷ったときの確認のみにしました。ガイドは、カラムが130pxでマージンを40pxで引いて作成しました。Retina対応のpsdなので、実際は半分でコーディングしています。

色味も最初は青みがかった色を入れていたがあまりそれに意味もなく、一種の統一感くらいの仮の色だったので最終的には変更。

SPはルールに沿ってしゅくしゅくと整えれば、line-height、font-size、marginは感覚で頭の中でルール化すればめちゃくちゃにはならないので。ほぼコーディングで吸収しました。

もっと凝っても良かったかなとも思ったのですが今後更新してコンテンツが多くなっていくことを考えると、できるだけシンプルにする必要がありました。左にメニュー、右にコンテンツ、コンテンツも1カラムでの表示で
右下にさっと見れる動画を付けることで、どういった投稿かが分かるようしました。

ロゴ・デザイン

画像2

昨年読んでいたレタリングの専門書とペンがあったので「ロゴも自分で作るか」と思い、手描きで数時間描いた。段々とルール化ができてきたので、面白い形に導かれるまま制作しました。

画像3

画像4

描いているうちに、正方形を45度回転させた半分に切った三角形の中に、文字を描きたいのかもと思い。

手描きでグリッド引いて、重ねたトレーシングペーパーで文字を描いて写真で取り込み、イラストレーターでベクターにしたのが今回のロゴです。好きな形を、好きなまま描きました。

Serif体のあしらいを入れたかったのですがかなりコッテリした見た目になったため丸みを帯びさせてアニメーションを付けることで一旦納得しました。

ロゴだけ作るなら、もっと時間を掛けるべきですが作業が膨大にあるのと、ある一定のクオリティが出たと感じたので修正を課題として、次の作業に移ることにしました。

作ってみて思うのは、やはりSerif体的なあしらいが欲しいのでそのうち微調整します。

フロントエンド、使った技術(CMS、フレームワーク、画像、動画)など

Next.jsを初めて使いました。使い始めは「ファイル量多い!コンポーネント分かれすぎ!このサイトの規模に合ってないかも」と思いましたが。しゅくしゅくと作業する中で段々と慣れ、最終的に「Next.js最高だな」となったので規模関係なくReactベースと言うのは最高でした。

ブログなので、CMSを入れる必要があり候補としてContentful、Prismic、WordPressを考えましたが今後の案件を考えて、WordPressとGraphqlにしました。

初めて使うフレームワークでブログ機能を一から作ると工数をとんでもなく持っていかれるのでGitHubで見つけたMITのスターターキットをベースにして、必要な機能を追加しました。(Yoast SEOにも対応していてい、案件でも使えるかもと言う印象)

画像はWebp、動画はMP4とVimeoを使用しました。WordPress5.8からWebpに対応らしく、それ以前のバージョンの場合Webpをアップロードできるようにする必要があるの初めて知りました。IE11がなくなったらWebpが主流になるんですかね、WebpもWebGLもSafariが最近足を引っ張りまくっているのが気になります。

動画をサイトに埋め込む際、YouTubeは使いにくいと最近思っていて詳細ページの大きな動画にはVimeoを選択。

一覧ページでの、小さい動画を入れ込むベストな方法はなんだろうと模索して、GIFアニメーションにしていたのですが、PageSpeed Insightsが「GIFなんて埋め込むんじゃねえ」とWARNINGを吐き出してきたので、MP4に全部変更。MP4の方が全然軽かった。
GIFにしろ、MP4にしろ小さくしか使わないので横幅300pxで作成、特に荒さは気になりませんでした。Easesのように小さい動画をたくさん埋め込む案件ってほぼないので。知見もなく、ここは修正で手戻りが発生しました。

WebGLは入れませんでした、そっちの方が目は惹きますが。速さとシンプルさを優先した結果、PageSpeed Insightsで90点だったので、運用する中でそのうち入れるかもですね 。最初からやり切らない方が運用もしやすいのでこの判断も良かったです。

ドメイン取得、ホスティング

ドメイン取得は、GoDaddyでesドメインを取得。IDが必要だったので、政府から交付されている番号を入れたらすんなり取得できました。(免許とかそういう類の、ただチェックは入らないので基本なんでも良いっぽい)

Next.jsだったのでVercelでホスティングしようと思ってDeployしたらエラー、Stack Overflowで調査したところ。自動でOGPを作成するライブラリでエラーしているとのことで調査して色々と試したのですが、全く改善しなかったので使ったことのあるNetlifyでのホスティングに切り替え。一発DeployでそのままNetlifyでホスティングになりました。

こだわりすぎるより臨機応変に対応した方が良いってことですね。

まとめ

「一人で作るなんて馬鹿げている」と言うのはごもっともです。

友達のスーパー・デザイナーにお願いした方が100万倍良いものを作れるのはもちろん分かっていたし面白いけれど、ただただ自力で走りたいだけの思いで作りました。

通っていたデザイン塾で、何かを勉強するということはアウトプットを続けること、完遂すると言うことを教えて貰った気がします。

卒業制作とは言えないけれど、MEMEデザインに行く前に自社サイト(https://www.terute.ru/)を作って卒業間近にEases(https://easeseas.es/)を出しましたと。

インプット、アウトプットとしては入れた分を出せたと思います。

執筆後記

昔のサイトを少し回想。
コロナ前まではGridsと言うサイトを運営していました。Grid Systems in Graphic DesignをカレッジのWeb Designコースにいた頃に読み、その時の記憶や知識をもとに作成したのがGridsでした。
https://www.pinterest.jp/grids_system/

Pinterestでいまだに結構見られている(こっちをずっと更新してれば良かったっすねw)

Gridsは1投稿の更新に数時間掛かること。(これはサイト制作時から友達に言われていましたが意地で更新していた)Josef Müller-Brockmannの本を読んだり、白井敬尚さんの授業を受ける中で自分の中のGridデザインの未熟さを知り、この知識で続けることはむずかしいと考えサイトを閉じました。

もう1点、「インプットもアウトプットも管理人がめちゃくちゃできているけど、見てくれているユーザーは分かった気になるだけなのでは」と言う疑問も辞めた理由の一つ。

フロントエンドエンジニアなので、やはり「コードを掲載するサイトを作りたい」と思っていたことを形にできたので満足です。

前に進むためには、造っては壊すを繰り返すのが一番だと信じています。
おしまい。


この記事が気に入ったらサポートをしてみませんか?