2021年 新年のご挨拶

明けましておめでとうございます。2021年になりました。

さて。お正月休みを利用して、このポートフォリオサイトを大幅リニューアルいたしました。やってみたかった実装や取り入れたい表現など色々あったんですが、結局全て盛り込むには時間が足りず見切り発車の公開のため、お見苦しい箇所があるかもしれませんがご容赦ください。

あと、2019年ぐらいからずっと書こう書こうと思っていたブログも、今回のリニューアルで追加しました。とてつもなく筆無精なので、どんな内容になるのか、どれくらいの頻度で更新できるのか自分でも未知数ですが、のんびりやっていきたいと思います。

記念すべき第1回目の投稿では、新年ということで昨年のプロジェクトをざっくり振り返ってみたいと思います。(本当は年末にやりたかった)

1月:食品会社さまブランドサイト

制作会社さまからの引き合いで、ブランドサイトと採用サイトの提案用デザインカンプを制作。

2月:自動車メーカーさまLP

デザインとフロントエンドを制作、静的HTMLで一式納品だったので ejs で構築。メーカーさま側には世界中の自社クリエイティブを全てチェックする機構が海外にあると聞いてだいぶビビりましたが、デザインもすんなり通り大きなトラブルもなく無事リリース。しかし、代理店傘下の制作会社から辿っても孫請けか曽孫請けぐらいの紆余曲折があり、決してうちの名前が世に出ることはないのが残念。あと、某大手代理店の納品フローが独特だった。

2月:食品メーカーさまブランド+ECサイト

WordPress での製品ブランドサイトと、メイクショップでのECサイト立ち上げのデザイン〜実装までを制作。メイクショップは PHP のテンプレートエンジンが Smarty なので、とても懐かしい気持ちに。でも正直、特殊な要件がない限り今なら BASE とか STORES で十分事足りる気はします。

2月:診断系LP

LPのデザインのみを担当。普段コーディングまで一貫して制作することが多いのであまり意識してこなかったけど、自分がコーディングしないプロジェクトでは細かなインタラクションまでデザインの時点でしっかり設計しておくべきだったと反省。

3月:グッズ制作会社さまLPとブログメディア

LPのデザイン・フロントエンドと、WordPress メディアのデザイン〜構築の制作案件。コロナの足音が大きくなってきていた時期。それまでは、たまに友人オフィスやお世話になっている開発会社さんオフィスを間借りしたりしていましたが、完全に自宅作業のみにシフト。奥さんも転職期間中で家にいたのでデザインは手伝ってもらいました(奥さんもデザイナー)。リモートのほうが断然作業は捗るんですが、やっぱりプロジェクトメンバーと直接会話しながら連携するのも大事だなと思いました。
あと、メディアサイトは機能要件や構成が似たり寄ったりなので過去に制作したアセットの流用性が高い、と思って油断しているといつの間にかアセットが古くさくなってしまってたりするので、デザイン面も機能やSEO面でもトレンドを追いつつ随時アップデートしていかねばなと思いました。

4月:アーティストサイトリニューアル

世の中は完全にロックダウンに突入。この時期はぽっかり予定が空いていたんですが、コロナの影響かと思ったらそんなことはなく、2〜3月に年度予算消化の駆け込み案件が多いぶん、例年4月は落ち着くみたいです。空いた時間で自分のやっているバンドのサイトリニューアルをしていました。ありがたいことに、多くのWebデザインまとめサイトなどにも掲載していただきまして、コロナ禍でバンド自体が活動できていないせいでサイトアクセスの流入元のほとんどがまとめサイトです。切ない。

Take Back The Beers!

6月:オンラインレッスンのマッチングサイト

コロナ禍らしい案件の引き合い。外出自粛に伴ってリアルでレッスンが開催できなくなった講師の方たちやその生徒さん向けに、オンラインレッスンの開催スケジュールの掲載や申し込みができるサイトをWordPressを使って構築しました。ユーザーマイページ機能を用意したり、ユーザーの属性によって機能を制限したり、ユーザー投稿で情報を掲載したりと、色々初めて実装する内容が多かった。この知見とアセットを使って他にも色々作れそう。あとクライアントさんのご要望で、個人的に初めて Bootstrap を導入しました。便利。

7月:オンラインイベントサイト

こちらもコロナ禍ならでは、企業やメーカーの展示会をオンライン上で開催するプラットフォーム作りのプロジェクト。UIデザインとモックアップを担当しました。実環境への組み込みは開発ベンダーさんという座組み。当初、前回のプロジェクトで味をしめた Bootstrap を使って組んでいたんですが、cssの容量デカすぎと指摘を受け、途中で Bootstrap 外しを実施することに。そもそもこの時点で、我流の命名規則 + CSS アセットと Bootstorap ルールの命名規則が入り乱れ危険な匂いを放っていたんですが、そこから Bootstrap を取り除いたことにより完全に無意味となったバラバラの命名規則が自分の首を閉めることに。我流の SCSS・CSS 設計を見直すいい機会になりました。あとフロントエンドが React だったので、jQuery を使ったモックアップは開発ベンダーさんに嫌がられました。すみませんでした。そろそろ本腰を入れて脱 jQuery に取り組もうと思った案件にもなりました。

8月:制作会社さまコーポレートサイト

都内の制作会社さんのサイトリニューアルのお手伝いをしました。フロントエンドと WordPress 構築を担当。

9月:住宅メーカーさまサイト

こちらは提案と要件定義用のデザインカンプのみの案件。9月ローンチで実際の作業時期は2019年末から2020年初頭だったと思いますが、この辺りから Adobe XD でめちゃめちゃ色々なインタラクションの表現ができることに気づき始めました。ステートの前後を指定するだけで間の変化を自動でアニメーションにしてくれる機能の優秀さに感動。

12月:建材メーカーさまサイト

数千に及ぶ製品データ、数百のカテゴリデータと1万件以上の画像データを WordPress に移行するリニューアル案件。扱うデータ量では過去1番のプロジェクトでした。移行のために、インポートプラグインをこれまで使っていたものから WP All Import Pro に変更。さすが有償プラグインだけあってめちゃくちゃ便利でした。あとはクライアントさま希望で HubSpot を初導入、MAツール系の知見あまりなかったのですがこれは便利。その他、PHP の実装まわりでも2、3回レベルが上がった音が聞こえました。あとは、夏頃から取り組み出した SCSS アセット再設計の成果を実践してみた案件でもありました。今のところ手応えあり。

12月:アーティストサイト

前職からご相談いただき、著名アーティストのサイトリニューアルをお手伝いしました。PSD のデザインデータをいただいてフロントエンドと独自CSMへの組み込みを担当。独自CMSはテンプレートエンジンに Twig を採用していて、退職して以来2年ぶりに触ったんですが、当時より PHP の理解が深まったおかげでデザインを再現する際に JavaScript でやるか PHP のほうが簡単に再現できるのか、自分なりの選択肢が増えたなーという手応えがありました。

12月:BtoCサービスサイト

元々デザイナーとして参画していたプロジェクトが佳境に入り、エンジニアの手が足りないということでフロントエンドのTwigテンプレートへの組み込みもお手伝い。これまでローカルの開発環境は MAMP を使ってたんですが、今回プロジェクトが Vagrant を採用していたので初めて触りました。CUI にもっと慣れ親しんでいかないとなーと痛感。Git の操作なんかもこれまで Dreamweaver や Atom などエディターの GUI 頼りだったんですが、もっとコマンド使いこなしていこうと思います。このプロジェクトに関しては関わってからの期間が長いので、振り返るとあーしとけばよかった、こーしとけばよかったと思う点が多々あるんですが、それはまたの機会に書きたいと思いいます。

といった感じで、上記以外にも細かいものも含めると30プロジェクト(前年比140%)と、よく頑張った1年だったんじゃないかと思います。

2021年は多少ペースを落としてでもひとつひとつのプロジェクトにもう少し時間をかけて、実装に持っていかれがちだった時間をデザインに割いていきたいです。もっとやれる気がする。

あとは脱 jQuery、TypeScript、React などの JavaScript 周りと、脱 WordPress にも取り組んでみたいと思います。WordPress はすごく便利なんですが、そのせいでどんな要件が来ても「WordPress でこうやればいけそうだな」を真っ先に考えてしまうので、臨機応変にその他の選択肢も検討できるようにしたい。

あとこのブログの運用。とりあえず最低月イチの投稿を目標に頑張りつつ、ブログの機能拡張やサイト自体のブラッシュアップも少しずつ進めていきたいと思います。

とうわけで、本年もよろしくお願いいたします。

Contact

Feel free write to me and tell about your project.

制作のご相談は、以下のフォームからご連絡ください。掲載しているもの以外にも色々な業種の制作実績があります。資料請求やお見積もりだけでもお気軽にどうぞ。