普通のサラリーマンが「STUDIO」を使って一週間でホームページ作ってみた
友達のお店のLP(ランディングページ)を全くのド素人が無料で作ってみる～4日目～
あれから大分時間が経過してしまったがやっと作ることができた。
STUDIOとは
まず簡単にSTUDIOのことをおさらいしておくと、HTMLやCSSの知識がなくてもWebサイトが作成できるサービス。
Web上でデザインを作っていけば同時にコーディングもされていく。
ほかにもWebサイト作成サービスはたくさんある。
ペライチやjimdoなどほかにも同じような用意されたテンプレートをカスタムしていく方式のサービスはあるが、STUDIOは用意されているテンプレートがおしゃれなのでテンプレートをカスタマイズしていくだけで、よさげなWebサイトを作ることができる。
STUDIOは完全オリジナルで1から独自でデザインを作ることもできる。
無料プランでも独自デザインで制作可能。
またスマホやPCの画面サイズの違いへのレスポンシブ対応もしているのでいちいちそれぞれで修正等をすることは基本的に必要ない。
使ってみた感想
STUDIOをいじり始めた初日こそ、テンプレートは何にしようとか、とりあえず使えそうな写真を外付けHDDから探してきたりで時間はかけたがそれからは平日仕事終わりに1,2時間程度「ここにテキストを入れたいな」とか「おしゃれなフォントがないかな」というのを調べながらいじっていった感じ。
振り返ってみればそんなに時間はかかってないように思う。
丸三日あればある程度形になる気がする。
マニュアル的なものはヘルプページを見るか、YouTube公式サイトを見るとわかりやすいと思う。
https://www.youtube.com/c/STUDIOJapan/featured
YouTubeは英語だが字幕を出せば問題なく理解できるはず。
問い合わせやQ＆Aはこちら。
ただこのようにヘルプページやYouTubeをみれば大抵のことは解決できるのだがそこまでにいきつくのに時間がかかる印象。
例えばYouTubeだと分かりやすく説明されているが自分が知りたいことに対してたどり着くまでに何本かの動画を見てみないと目的のものにたどり着けなかったりする。
ただこのあたりはユーザーが増えてヘルプページなどが充実してくると解決するのかもしれない。
STUDIOでランディングページを作るまで
1日目
まずはどの設定でやるかを決定させる。
上記のようにSTUDIOは完全オリジナルで1から独自でデザインを作ることもできるので自由度は高いが、自分の場合はまずはテンプレートを使ったどのくらいのものが作れるのかを様子見。
2日目
とりあえずせっせとよさげな画像を引っ張り出してきてSTUDIOにアップロード。
アップロードした画像をそれぞれのテンプレートにもともと貼ってある写真から交換していく。
3日目
ただ画像を張り付けていくだけだと画像の向きやサイズが異なるのでもともとのページと合わない。
そこでメニューページやトップページなどにどのようなサイズで貼るか、
「contain」や「リピート」という単語を調べながら設定していった。
画像の「サイズ調整」「リピート」「位置調整」 | STUDIO Blog
ゆくゆくはマウスを持ってくと画像が変わるというこんな設定も入れていきたいな。
4日目
トップページの画像に載せるフォントがダサいということで色々検索、試行錯誤。
日本語フォントは少ないように思う。
またフォントをSTUDIOにアップロードできないので一旦外部からフォントだけダウンロードして画像にテキストを入れてその画像をSTUDIOにアップロード
手持ちのフォントをアップロードして使用することはできますか？ | STUDIO U
5日目
内部リンクの設定
雑誌やお店の情報などのNEWSページやギャラリーページをトップページから飛べるように設定
これができるだけでwebサイトっぽくてランディングページ作ってます感が出てくる。
6日目
インスタやFacebook、掲載記事への外部リンクの設定。
表示の小さいスマホで有効的なよく見る三本線をハンバーガーメニューというらしいがこのドロップダウンメニューを設定。
(もしくはプルダウンメニューともいう。
メニュー項目の上にマウスを載せると、隠れていたサブメニューが下側に展開するようなメニューのこと。)
問い合わせ先のページの設定など
スマホで掲載される電話番号から直接電話を掛けられるようにしたり。
7日目
STUDIOはレスポンシブ対応ではあるが設定がうまくいってないとずれてしまうこともあるので細かい設定はライブプレビューなどで何度か確認が必要。
自分の場合は画像の上に載せたテキストの配置位置が微妙にパソコンとスマホだとずれてしまうなどがありその設定に時間がかかった。
STUDIOでうまくサイトを作り上げるポイント
上記のようにほぼ画像に対してどのように指定していくかが主だったと思う。
なのでこのようなサイトを作る人からしたら当然のことだろうがやっぱり素材が大事だと思った。
写真がうまく取れてるものだとやはりサマになると思う。
ただ、いい写真が自分の手元にない場合でもあらかじめSTUDIO側で用意された写真がおしゃれなのでそれである程度は対応も可能だと思う。
できあがったサイト
実際に作ってたサイトがこちら。
まだメニューページなど不完全な部分もあるが徐々にアップデートしていきたい。
