今年の春先からSTUDIOというウェブサイト製作ツールを使い始めたのだが、もうコーディングが必要な製作作業には戻れない。今後すべての案件を、このツールを前提にして仕事の設計をしたくなる感じ。パワポのようでもあり、レゴ的でもあり、慣れればこれまで事前にAdobe IllustratorやXDでつくっていたウェブサイトのデザイン作業すらせずに、直接STUDIO上でデザインできてしまう。

STUDIOはPC or MacのGoogle Chromeで動作する。あと必要なものは、文章と写真と画像素材、動画素材だけだ。さっそく3つのウェブサイトを製作した。

http://mayukaikeru.com
http://tankyu.jp
http://etpk.net

この10年、多様に増える画面サイズの中で、レスポンシブルデザインの為に、コーディングを誰かに頼まなければならない状況にすっかり疲れ切って、ウェブデザインなんかもうまったくやる気がしなくなっていて、紙のデザインばっかりやっていた。この手のレスポンシブルサイト製作ツールは一昔前から存在していたのだが、どれもイマイチだった。(Wix、Jimdo等)既存サービスはありもののテンプレートの中から、材料を放り込んで型にはめるだけの上に、細かな調整はすべておまかせであった。要はメインターゲットが素人でもできるけれど、素人だからこの程度でいいでしょ、というものだった。

マージン操作もドラッグするだけ!(以前は、margin-left: 180px;とか書いていた。書式を毎回忘れて大変)ヘルプも充実していて、だいたいここを見てれば使えるようになるのだけれど、この本には使い始め当初はだいぶ救われたのでした。

STUDIOが既存サービスと決定的に違うところ


1.テンプレートをベースにすることなく、ゼロからサイトデザインしていくことが非常にし易い。けれど、最終的に出来上がったページのHTML構造をみて見ると、きちんと構文されているのである。なのでGoogleもすぐに検索にひっかけてくれる。

2.STUDIOユーザーである外部デザイナーからテンプレートデザインを買い取って、テンプレートをどんどん増やしている。

3.GoogleDocumentのようにウェブサイトの編集画面そのものを他のアカウントにシェアできるので、やろうと思えばクライアントサイドでも文字修正が直接できてしまう。

4.Googleフォントおよびモリサワフォントが使えるため、フォントの悩みがだいぶ少なくなった。画像もJPEG、PNGの他にSVGが使えるため、Illustrator上から直接アウトラインデータをウェブ上に実装できる。

5.製作中の環境もなかなか新たなユーザー体験が用意されていて、ウェブサイトの構成要素を調整した瞬間から、すべての画面サイズのデバイスに自動的に結果が反映されて細かな調整をイチイチ画面を切り替えながらチェックする必要がない。


6.RSSを引っ張ってくることで、noteやinstagramの記事投稿データを、自動的にSTUDIO上のウェブサイトに表示させることができる


試しにつくってみたinstagram > STUDIO RSS 接続テスト
https://tama-test.studio.design/instagram

7.ユーザーコミュニティがしっかりしており、slackのSTUDIO Communityに登録すると、直接STUDIO社の開発者さんだったり、社長さんだったりとご相談ができる。小さなバグはすぐに直してくれる。


ともかく、STUDIOの登場によってウェブサイトの製作環境が、根底から覆った。もう無かった頃には戻れない。ウェブデザインの世界は益々コンテンツそのものの、素材そのもののクオリティが求められる。写真、文章、イラストなどのグラフィック、それ以前に伝えるべき内容、リアルに存在するそのものの内容が問われるようになってくる。


さて、三ヶ月ほどSTUDIOを使い倒して、どうもSTUDIO社は2つのペルソナを想定しているような気がしている。

1.既存サービスと同じ、素人ユーザー
2.コーディングが苦手なデザイナー


ここから先は、2の立場からのSTUDIO社への要望



● UI上のクリティカルな改善要求

・ライブプレビューをiPhoneやiPadで見ている場合、開発側画面のスクロールを動かすと、デバイス上でも同じ場所を自動でスクロール追随できるようになってほしい。毎度毎度、多少でも上下にスクロールしてしまうたびに、iPhoneでもスクロールして、iPadでもスクロールしてという手作業が沢山発生している為です・・・。

・開発画面で『768px – iPad』や『414px – iPhone8 Plus』サイズに変更しようとすると、レスポンシブバーがコンテンツ要素と被っている場合選択できないので、毎度毎度コンテンツのない最上部までスクロールしていって、やっとレスポンシブバーが触れるようになって画面サイズの変更ができるので、上下行ったり来たりがかなり無駄に発生している。半透明表示をやめて、表示させっぱなしでいいのでは。

・UI上のサイトマップの位置を、画面右側のdiv構造が見えている場所に、なんらかの方法で同居させてほしい。ページが増えて縦に伸びていくものが、何故開発画面の『上』にあるのかさっぱりわかりません。(ページ数を増やさせない為の制限?)



● 優先順位の高い追加要望

・img要素にリンクを張れるようにしてほしい(切実)

・RSS読み込み元が3つしかないのと、RSSひとつにつき12個までしか表示できない制限の解除。これではちょっとした更新機能の実装程度しかできず、新たななにかが生まれる可能性も制限しています。

・アニメーション機能。ファーストビューをリッチにする方法が、現状動画の実装しかないが、動画の実装はかなりハイコストなため、アニメーションや複数枚の写真が入れ替わるなどの機能を求む

・グリッドレイアウトがどうしても田の字構造になってしまうので、WordpressのjQueryプラグインにあるような動的なグリッドレイアウト機能の実装を求む。これもコンテンツ部分のデザインパターンの限界にぶつかっている為。(→ https://cfs.group こういうのつくりたい)

・ヘッダ、フッタ部分の主にメニューなどの共通要素の管理方法について(現状、更新の為にめっちゃコピペする作業が起きています。iframeで対応しようとしたが、リンク先にtarget指定ができない為あきらめた)

・コンディション :hover 時に変更できる要素の拡充。現状色を変える程度のことしかできないが、サイズを変える、画像要素の表示/非表示ができると、PCビューでは表現の幅が広がる

・iPhoneSEのために、スマートフォン用のレイアウトをひきずられてつまらなくなりがちなので『320px – iPhone SE』は4つめの別サイズとして定義を求む(せっかくのiPhone 8Plusサイズが生きない・・・)


● どちらかといえば欲望に近い追加要望

・フォント環境の拡充。Adobe Fontを使えるようになると、かなりデザインの幅が広がるのですが

・ドメイン接続するためだけに、9$/月は高い。名刺サイト程度のライトユーザー利用を想定した低価格プランを求む

・ドメイン管理をしてほしい(そのためにいちいち他社サービス使うのが難)上記低価格プランとのセットも

・そもそも無料プランでつかえるサブドメインが長い(http://○○○○○.xxx.xx)くらいにしてほしい

・各種制限を突破したプロ向け料金プラン設定があってもいいのかもしれない


ウェブサイトをコーディングしなくて良くなった先の未来


ここまで3カ月ほどSTUDIOを使い倒して、はたと思うことがある。既存のウェブサイトの作り方を踏襲することにどれほどの意味があるのか?と。どうしても無意識にグローバルメニューをつくって、ファーストビューでなるべく情報を伝えて、記事ページをつくって、入りきらない情報はフッターに・・・、などと、過去を踏襲しようとしてしまう。けれど、コーディングから解放されたことによって成し得る、情報デザインの方法がありうるのかもしれないと思ったりするのである。ここらへんは引き続き研究したいと思う。

それから、かつて1990年代のNetscape Navigaterの頃に、ブラウザーにコンテンツ編集機能を実装するべきだ。という話が実際にあったのを覚えている。それはなんて素晴らしい世界なんだろうと思いながら現実にはHTMLを書いてFTPでアップロードしていた。2000年代はじめにMovableTypeが現れ、GREEとMixiが現れ、中頃に各種blogサービスが現れ、2000年代が終わる頃にTwitterが現れ、Facebookが現れ、Instagramが現れた。2010年代になってからは個人が発信する情報の渦に疲れきって暗澹としていた。ライトな情報発信ができるようになったのはいいけれど、読むに値するだけの情報を誰もインターネット上で編集できていないという現状。そんなときに、20年前に思い描いていた未来が突然やってきた。誰でも自由にブラウザからウェブサイトがつくれる20年越の未来、それがSTUDIOっていうサービスに感じている期待感である。