30分あれば、STUDIOでプロフィールページを作って公開もできちゃいます？！
こんにちは、Webエンジニアをしている村野（@samemuramura）です
以前から仕事のプロフィールページを作成・公開していたんですが、Bloggerで結構無理やり作っていて、デザインや運用面に難があったので 日本製NoCodeツールの雄 STDUIO を使ってページを作り直しました
作成したページはこちら
STDUIOは使いやすくデザインのカスタマイズ性が高く、またホスティングもSTUDIOでしているためすぐに公開できるなどの利点があり、少しずつ触っていましたが（過去記事）、私が作ったプロフィールページのようなチュートリアル記事が見つけられなかったため、この記事に情報を残しておくことにしました
ぜひ、皆さんも自分のページをつくってみてください
作成の前提条件
プロフィールページを作成するにあたり、今回は以下の前提条件にてスタートします
・プロフィールページに記載する情報がかたまっている。私の場合は、違うサービスからの移管。
・STUDIOを簡単にでも使ったことがある。基礎編の動画を見て操作したことがあるレベル
・無料プラン。独自ドメインやGA・サーチコンソールは設定しません。
以降、具体的な作業に入っていきます。早速やっていきましょうー
作るページのイメージ・大枠を決める
STUDIOのサイトで事例集があるのでこちらを参考に作りたいページのイメージとレイアウトなどを決めましょう
次から具体的な作成作業に移っていきます
プロジェクトの作成
【プロジェクト一覧】から【新規プロジェクト作成】を選択します。時短・サイト品質向上のために少し下の方にあるテンプレートを選びましょう
今回はシンプルな単一ページを作ったので、右上のカテゴリから【ランディングページ】でフィルターして探しました
最終的には Yellow を選択しました
ちなみに、プロジェクト名は、「プロフィールページ」などがわかりやすくて良いと思います
ページのタイプをホームにする
忘れないうちにページのタイプをホームにしておきましょう。テンプレート次第かもしれませんが、今回はデフォルトでページの"1"にパスが設定されていました
ヘッダー・フッターを変更する
ヘッダー・フッターの色・テキストを変更します。時間をかけないようシンプルに一旦に変更を完了させましょう
最終的に全体を見直して調整するのが良いです
コンテンツを変更する
テンプレートの中で使える要素はそのまま内容を変更して使います
今回は、catch部分をテキストとフォントサイズを変更して使いました
その他のセクションはRichTextを使うとブログに近い編集性になるのでスピードを重視する場合はオススメです
以下は要素の構成例です
要素を構成する際には親子関係をしっかり意識して作成しましょう。要素をコピーする際やスマホ表示がしやすくなります
こんな感じでセクションを作成したら、このセクションをコピーし同じ要領でコンテンツをどんどん作成しましょう
コンテンツが完成したら、仕上げに入ります
スマホ表示対応
以下の記事を参考にスマホでの表示を確認し、問題があれば修正しましょう。エディタ画面で表示幅を小さくすれば確認できます
私の場合は、ヘッダーの文字列がはみ出ていました。今回は右端の画像をスマホでは非表示することで対応しています
プレビュー
エディタ画面右上の【ライブプレビュー】を押して、プレビュー表示を確認しましょう
できれば、Chromeのデベロッパーツールなどでスマホの表示を確認できるといいです
SEOの設定
公開前にSEOの設定をします。エディタ画面右上の歯車ボタンを押すとSEOの設定が表示されます
最初は【Page】ごと設定が表示されるので、【Site】を選択してサイト（プロジェクト）全体の設定をします
【Site Name】と【Description】を設定しますGoogle検索などでヒットしやすく、分かりやすい表示にしましょう
次に、SNSでシェアした時などに表示されるOG画像（サムネイル）を設定します
このSEOの設定は場所が少し分かりづらいのでGIFにしました
公開
作業お疲れさまでした。最後にドキドキの公開作業を行います。これもSTUDIOなら簡単数ステップで完了です
まず、エディタ画面右上の【公開】を押します。ドメインを入力した後、【公開する】ボタンを押せば、無事公開完了です！
Conguraturation!!!
公開後の作業
SNSなどでシェアしましょう。私はnoteのお仕事記事に掲載しました
これでGoogleにインデックスされ、検索結果に表示されるようなのですが公開後3日経過してもまだ表示されないようでした。。。このあたりはシェアした媒体の更新状況にもよると思いますので気長にまちたいと思います
確実は方法は、STUDIOを有料プランにしてサーチコンソールからインデックスをリクエストすれば通常のWEBサイトと同様にインデックスされると思います
ちなみに、一度公開した後にページを変更した場合は、公開を更新しないと公開ページに反映されませんのでご注意ください
あとがき
いかがでしたでしょうか？
30分ではなかなか難しかったでしょうか？私はコンテンツの作成までが30分くらいで終わりましたが、SEOの設定やスマホ表示の調整などをして公開までいれると2時間くらいかかりました w
30分で公開できた方や全然終わらなかったなど、ぜひコメントで教えてください
私のnoteでは、Web開発に関する記事などを投稿しています。良かったらフォローください
Twitterではグロースハックの投稿をしています。こちらも良かったらフォロー頂けると嬉しいです
いいなと思ったら応援しよう！
