フリーランスとして活動していると、ポートフォリオの重要性を実感する。新しい取引先に営業をかけると必ずポートフォリオの提出を求められ、メールに添付したURLが合否を決定的に分ける。

しかし、筆者のように、デザインの素養もプログラミングの素養もほぼない人間がウェブサイトを一から作るとなると、なかなか骨が折れる。かと言って、零細フリーランスライターとしては、お金をかけてプロに依頼するのも難しい。

多少の手間は惜しまないので、簡単に、安価で見栄えのいいウェブサイトを作りたい。そんな人にとって便利なサービスが、2018年4月にリリースしたばかりのWebデザインプラットフォーム「STUDIO（スタジオ）」だ。

コードいらずで、画像やテキストをブロックのように積み重ねることでウェブサイトを構築できる。これまでSTUDIOで作ったウェブサイトは、有料版でのみ公開可能だった。しかし、2018年9月25日より無料版でもウェブサイトが公開できるようになった。そこで今回は、STUDIOを用いたライター向けのポートフォリオサイトの作り方をご紹介する。

登録の流れ

まず、サイトトップから「無料ではじめる」ボタンを押す。すると、登録ページに行くので、メールアドレスかFacebookとの連携で登録する。

現在、STUDIOの編集はPCのGoogle Chromeブラウザのみに対応しているため、他の端末やウェブブラウザでは編集ページを開けないことに注意していただきたい（筆者は普段Firefoxを使っているので、ここで一度引っかかった）。

新規プロジェクトの作り方

PCのGoogle Chromeでログインすると、早速新規プロジェクト追加ボタンがあるので、クリックする。ちなみに、STUDIOは無料版でも有料版でも作れるプロジェクト数に上限がないので、いくらでも実験可能だ。

続いて、ウェブサイト（Web）を作るのかアプリ（iPhone App）を作るのかを選ぶ項目がある。今回はポートフォリオなので、Webを選ぶ。

ウェブサイトのデザイン

編集画面（ダッシュボード）にうつったら、一番上のデザインを押して、ウェブサイトの作成を開始する。

デザインは白紙からはじめることもできるが、初心者の場合は、テンプレートを利用するのがオススメ。テンプレートはリクルート、旅サイトなど、用途ごとに用意されていて、どれもデザイン性の高いものばかり。

今回はポートフォリオということもあり、右上のテンプレートを利用した。

作業画面は以下のようになっている。左端のADDタブで画像やテキストを新規に配置でき、右端のPAGESタブで各ページの編集ができる。また、右下の拡大、縮小で編集しやすい大きさに変更できる。

タブはそれぞれピンアイコンを押せば固定できる。個人的には、固定しておく方が便利だと感じた。

新規配置できる要素はボックスと画像、アイコンの三つに分かれており、既存のボックスを編集したい場合はその部分をダブルクリックすると編集可能だ。また、YouTube、Google Maps、コンタクトフォームの埋め込みも簡単にできる。

選んだボックスの周囲に出るアイコンの部分にマウスを動かすとタグや配置、リンクを編集できる。

画像を入れ替えたい場合は、変更したい画像を選んだ状態でADDタブの画像から選べば変更可能だ。画像は自分でアップロードすることも可能だが、無料画像素材サイトのUnsplashの画像も利用できる。キーワードを入力すれば親和性の高い画像が検索されるので非常に便利だ。

写真やテキスト、リンクなどを編集、配置した画面が以下。ページは、個人的に力を入れているレビュー、イベントレポート、インタビューの項目とプロフィール、コンタクトの項目で作成した。

「ライブプレビュー」ボタンを押せば、プレビュー画面の確認ができる。URLとQRコードで表示してくれるので、PCとスマホで確認可能だ。

すると、iPhoneで個人サイト内の各ページに飛ぶためのタブが表示されない、という事態が発生。

問題が発生した時の対応

ヘルプチャットに連絡し、色々いじってみる。すると、選んだボックスの表示、非表示を端末ごとに選べることが発覚（右上の目のアイコン）。

また、各端末ごとの画面編集をする場合、上部のグレーのボックス上（下記画像、赤線枠内）をドラッグすることで、端末ごとのデザインを閲覧、編集できた。

結局、うまく表示できなかっため、チャットを待つと1時間程度で対応いただけた。

利用していたテンプレートとうまく表示できなかった部分を伝えると、動画で解説を付け加えてくれ、無事にiPhone版にもタブを表示できた。

公開

公開は非常に簡単で、IDを設定し、公開ボタンを押すだけだ。ドメインは「.studio.design」。また、SNSなどでの公開設定も選べるのでそちらも編集しておくと良いだろう。

完成した筆者のポートフォリオは下記URLから飛べる。

大藤ヨシヲ：ポートフォリオ

STUDIOでポートフォリオ作成にかかった時間、作った感想

STUDIOを用いたポートフォリオ作成にかかった時間はおよそ2時間半。

利用してみて、筆者の感想を述べると、よかった点は、

• 無料でもデザイン性が高い
• 固定された部分がないので、自由にいじれる
• マップやコンタクト画面がデフォルトで簡単に設置できる
• わからない部分はヒントで動画解説してくれたり、チャット対応も非常に親切

気になった点は、

• 固定されていないので、タブなど、各ページで同じことを書いておきたい部分の変更を全ページで編集しなくてはいけない（解決策があるかも？）

総合的には、STUDIOはポートフォリオ作成にかなりおすすめだ。とりわけ、凝り性の人には最適だろう（あまり凝らなくてもいい、という人には固定されたページをいじれるStrikinglyがおすすめ）。テンプレートが豊富なので、初心者でも簡単にデザイン性が高いものが作れる。一方、自由度が高いので、細かいところまで好みに調整可能だ。

また、無制限で様々なプロトタイプを作れるので、今後、ウェブデザインを学びたいという人の練習にはうってつけだろう。

有料版へのアップデートは月々9ドル（約1000円）。独自ドメインと拡張機能などが使える。

ポートフォリオを作りたいと思っていても、なかなか作れていない。そんな人は、これを機にSTUDIOでサイトを作ってみてはどうだろう？