ポートフォリオサイトを作るのは趣味。実験でもある

実はSTUDIOでポートフォリオを作ってくださるクリエイターは多いのですが、今回はメディアを縦断して活躍される市川さんがどのようなポートフォリオを作られるのか、とても楽しみにしていました。ぜひ、新しいサイトのコンセプトを教えてください。

白を基調としたWEBサイト。 noteやtwitterといった情報もひとつに。

デザインや構成は基本的に以前の自分のウェブサイトをアップデートしたものです。これまでのウェブサイトは過去に書いていたブログとポートフォリオサイトの要素が混じってしまっていたのですが、今回は「私の基本情報や近況は、ここを覗けばチェックできる」ということを念頭において、完全にポートフォリオサイトに振り切りました。

私の場合、クリエイティブ・コンサルタントとしてのクライアントワークや執筆、インタビューやモデル業といったメディア露出の他に、自身で撮影した写真や制作した動画、note や SNS などで発信する記事やコンテンツもポートフォリオの大きな一要素になってくるので、それらをどうやってひとつのサイトで見せていくかということにこだわりました。

これまでの市川様のポートフォリオ遍歴をお聞かせください。その中で変わらずに⼤切にされていることがあれば、教えてください。

一番は更新がしやすいこと。二番目は欲張りですが、カスタマイズがある程度簡単にできながら、自分の思い描くデザインを形にできること。制約があって、できないことが多いサービスやテンプレートも多いので。

フリーランスになったばかりのころ、7 年ほど前に、nagiko.me というドメインを取得してから、最初は Blogger、その後は Wordpress でポートフォリオサイトのような、ブログのようなウェブサイトを持っていました。子どものころからウェブサイトをいじるのが好きだったのですが、それは大人になっても変わらず、気が向いたとき (2 年に 1 度くらい) ガラリとリニューアルをしながら、今に至るという感じです。

プレビュー機能で確認しながら制作。

わたしはデザイナーでもコーダーでもないこともあり、さすがにゼロから Wordpress のテンプレートを作るのは難しいので、海外のサイトから有料のテンプレートを購入して、それを自分が頭で描いたデザインや構成に改造していくということをいつもやっていました。また去年、会社化したのですが、銀行口座開設のために会社のウェブサイトが必要ということで、そのサイトは急遽 Squarespace で制作しました (ペライチの簡素なものですが)。もし STUDIO がなかったら、以前と同じように Wordpress の良さそうなテンプレートを探し改造して制作していたと思います。

◯◯な STUDIO を待っていた

クリエイティブ・ コンサルタントの市川渚さん

「簡単な操作性」と「自由な表現」の両立は、まさに STUDIO 3.0 で実現したかったことです。今回のサイトはどれくらいの時間をかけて制作されましたか?

仕事の合間に作業をして、トータルで 1 ヶ月ほど。まずは以前のウェブサイトのデザインを STUDIO上でおこしていくという作業から行いました。その後、構成を見直し、それに合わせてデザインの変更や細かなブラッシュアップを行いました。基本的に自分のウェブサイトは実験の場だと思っているので、サイトマップやワイヤーを描いたりはせず、作業しながら、頭の中のデザインを組み立てていく感じです。特に今回は STUDIO の新機能で何が出来るか、出来ないか、ということを制作前に把握するのが難しかったので、頭で考えながら制作していくという形で良かったと思います。

今回、STUDIOでポートフォリオを制作する上で不安はありませんでしたか？

STUDIO のことは、どなたかが使っていたのを Twitter で見かけて知ったと思います。その後も、友人が運営に関わっている Design Scramble などのサイトで使われているのを拝見していました。以前、自分の会社のウェブサイトが必要になったときに、Squarespace と STUDIO を比較して、その時は Squarespace を選択してしまったのですが、その時 STUDIO を選ばなかった理由はシンプルすぎて出来ることがすくなさそうだという理由だったと思います。とはいえ Twitter に上がってくる制作例はかなりクオリティの高いサイトばかりだったので、ずっと使ってみたいなと思っていました。

コードを書けなくてもスムーズに使える。

また、自分のポートフォリオサイトのリニューアルは半年くらいずっと考えてきたことだったのですが、更新が頻繁に必要になってくるので CMS が必須ということで、静的なサイトしか作れない STUDIO は選択肢に入ってこないなあと思っていたところだったので、今回のアップデートは待ってました! という感じでした。とはいえ、実際何がどこまで出来るのかが見えなかったので、不安はありました。

画を描くように、ウェブサイトができあがっていく

以前も STUDIOを触ったことがあったという市川さん。今回ついにWEB サイトを制作されましたが、ずばり、使い心地はいかがでしたか?

操作や STUDIO の UI の考え方に慣れるまで少し時間は掛かりましたが、慣れてしまえばこっちのもので、Photoshop や Illustrator などのグラフィックソフトで画を描いていく感覚でウェブサイトが作れてしまうことには感動しました。

また、PC、タブレット、モバイル、と複数のデバイス間をリアルタイムでプレビューできるのも素晴らしく、レスポンシブデザインの作りやすさはもちろんのこと、PC/タブレットとモバイルで要素を出し分けたり、デザインを変えたりと、自由度も高くて、ここは個人的にかなりポイントが高かったです。中学生の頃、自分で書いた HTML をブラウザで開いて、コードを書きかえてリロードするたびデザインが変わっていくのが楽しくてウェブサイトをつくるのにハマったのですが、その原体験を思い出しました (笑)

制作したサイトはさまざまな端末で、リアルタイムでプレビューできる。

地味な部分かもしれないのですが、直感的な UI だけでなく、HTML の構造を確認できるようになっているのも嬉しいです。デザインが複雑になってきたときに「どうしてもここが思い通りにいかないな」「レイアウトが崩れたな」なんてときも HTML の構造を確認すると、おかしな場所に要素が置かれてしまっていたり、上下関係がおかしくなってしまっていたりなどということがすぐにわかるので、デバックと修正のしやすさが段違いです。

完成したウェブサイトがすっきり軽量。Wordpress は非デザイナー/エンジニアが魔改造しだすとプラグイン地獄に陥って、激重になったり、何かが動かなくなってしまったり、ということがよくあったので。

RSS を取得することで、外部サイトや SNS などのコンテンツを簡単にひっぱってくることができる。今回は note、Instagram、YouTube で使用しました。

新機能に関しては、CMS はとてもシンプル、最低限の機能という感じだったので、今後の進化に期待します! アニメーションは直感的に適用できるのが楽しくて、今回はシンプルな動きのみに絞りましたが、いじっていると何でもかんでも動かしたくなってしまいました。

STUDIOはブラウザベースなので、自宅にいても作業が可能

ありがとうございます。反対につまずいた点、改善のご要望をお聞かせください。

HTML / CSS をある程度触った事があって「HTML でマークアップして、それに対し CSS でスタイルを定義する」という考え方に慣れていると、共通する要素に対しても一つ一つスタイルを設定していかなければならない (複数選択して一気に変更は出来るが、ページをまたいでしまうとそれはできない)のがちょっと面倒でした。画像のスライダーが使えるようになると嬉しいです! また、写真の見せ方にもう少しバリエーションがつけられるような機能があると嬉しいですね。あと、入力した数値を削除し、Enter を押した際に代入されるのは NaN ではなく、0 になったらいいなあと思いました!

市川さんの新しいポートフォリオサイト。

STUDIOをおすすめしたいのは、こんな人たち

スライダーはリクエストが多いので、まさに検討しているところでした。貴重なご意見をありがとうございます。ちなみに、STUDIO を今後だれかにおすすめしてくださるなら、どんな方でしょう?

更新が面倒、リニューアルしたいと思いつつ、ポートフォリオを放置してしまっているクリエイターのみなさん。デザインを描いて、コーディングをして、という作業を同時に行えるので、制作のスピードが段違い。

あとは、インデペンデントなファッションブランド、小さな規模のショップ。これまでは予算をかけて外注しなければならなかったウェブサイトを、少しの勉強で、すぐに自身で制作することができる。CMS 機能の提供で更新もしやすくなったので、これらは彼らのビジネスにとっても大きなアドバンテージになると思います。私自身も、次は Squarespace で簡易的に作ってある会社のウェブサイトをリニューアルしようと思います。

最後に、STUDIOにご期待いただくことがあれば、お聞かせください。

STUDIO を通して、WEB サイトを作る楽しさをもっと多くの人たちに知ってほしいです。

ありがとうございました。市川さんが STUDIO 3.0 で制作した新しいポートフォリオはこちらからご覧いただけます。