STUDIOのサイト制作で、次は「しない」ポイントをまとめました
こんにちは。がっきーです。
先日、社内のwebサイトをリニューアルする際に、初めてSTUDIOを使いました。
実際に制作したサイトはこちら↓
STUDIOはノーコードで開発でき、エンジニアがいなくてもサイト制作できる便利なツールですが、初めての私にとっては使い方や構造を理解するのが難しかったです。
そこで今回は、これから初めてSTUDIOを使う方に向けて、私が次STUDIOでサイト制作をするなら、次は「しない」というポイントをまとめました。
作りたい構成がすでにある場合はテンプレートは使わない
STUDIOには、無料で使えるテンプレートが豊富にあります。
STUDIO初心者の私は、自分で0から構築するよりテンプレートを編集した方が早く制作できると思い、テンプレートから作ることにしました。
ホバーやアニメーションが既に付いていてクオリティが高いのですが、構造を理解していない私からすると、
「このアニメーションを消すにはどこを操作すればいいんだろう？」
「間違えて、違うホバー消しちゃった..」
ということが多々あり、ホバーやアニメーションを剥いで0に戻す作業に時間を取られてしまいました。
なので、次STUDIOでWebサイトを制作するなら、特に構成にこだわりがなく、テンプレートをベースに画像やテキストの差し替えのみ制作する場合はテンプレートを使い、作りたい構成が既にある場合は、テンプレートを使わずに0からスタートしようと思いました。
なんでもかんでもCMSを使わない
今回制作したWebサイトの運用は、私ではなく別メンバーに任せることになっていたので、今後運用しやすいように、なるべくCMS機能を使おうと考えました。
実装した後に知ったことですが、CMS機能で作ると、それぞれの要素から
それぞれ違うアンカーリンク先に遷移させることができない(※)
それぞれ違うモーションをつけることができない
など、できない表現があります。
制作終盤で、自分のイメージしているモーションをつけることができず、最初から要素を作り直すことになってしまいました。
CMS機能を使うのは、更新頻度が高いコンテンツのみで極力少なくした方が、制作できるデザインの表現は広がる気がします。
モーションにこだわりがある場合や、遷移先が複雑になる時は、CMS機能を使うコンテンツを吟味してから実装しようと思いました。
(※)プロパティを使ってリンク設定すればできるようですが、直リンクをそれぞれ設定しないといけないです。
骨子が決まるまでSTUDIOで実装しない
初めて使うツールなので、早く慣れないと..！という焦りもあり、サイトの構成や骨子が明確に決まっていないうちからSTUDIO実装に着手してしました。
今考えると、初心者の私には、XDやFigmaでワイヤーフレームを完成させてから、STUDIOに移行する方がよかったです。
SEO対策で、検索されやすいワードは見出しの<h1>タグに入れるというものがありますよね。このことを、私は完成直前に知りました。
そのせいで、<p>タグで作ったものを<h1>タグに変更する地道な手戻りが発生してしまいました。
STUDIOはコンポーネント機能がないので、手戻りが発生したときに一つ一つ修正しないといけないので大変です。
（シンボル化という機能があるけど、XDやfigmaみたいにインスタンスは作れないんですよね…）
STUDIOを初めて使われる方には
ワイヤー制作（XD or figma）
ワイヤー実装（STUDIO）
ビジュアル制作（XD or figma）
ビジュアル実装（STUDIO）
の順番で、必ず骨子が決まってからSTUDIO実装することをオススメします。
どうして、ワイヤー作ってから一旦STUDIO実装するのかというと、ビジュアルまで完成した後にSTUDIOでできない表現だから作り直しということを避けるためと、レスポンシブも骨子ができたら一旦実装してしまった方が調整が楽だったからです。（私の経験上）
以上、私がSTUDIOを1回触ってみて感じた、次は「しない」ポイントでした。やり方は人それぞれですが、誰かの参考になればいいな！と思います。
それでは、がっきーでした。
written by がっきー
新卒でISIDに入社してデザイナーになりました。「まずやってみる」をモットーに日々デザイナー修行中です。
この記事が気に入ったらサポートをしてみませんか？