paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

クリックしていくだけで本格的なWebサイトが作れる「Seicenta」を使ってみた!

f:id:paiza:20171018122237j:plain
どうも、まさとらん(@0310lan)です!

今回は、超お手軽に本格的なWebサイトを作って、そのまま公開まで完結できるオススメの無料Webサービスをご紹介します!

初心者の方ならテンプレートを選んでいくだけで完成するし、中級者以上の方はコンテンツをカスタマイズしたりプログラミングすることも可能な万能型サービスとなっているのが特徴です。

Seicenta

f:id:paiza:20171018122325j:plain

■「Seicenta」の使い方!

それでは、実際に「Seicenta」を使いながらどのようなサービスなのかを詳しく見ていきましょう!

まずはトップ画面にある「Login」をクリックします。
f:id:paiza:20171018122344j:plain


すると、Webサイトの管理ができる「ダッシュボード」が表示されます。
f:id:paiza:20171018122356j:plain


この画面右上に、ちょっと小さいですが「ユーザー登録」できるリンクがあるのでクリック!
f:id:paiza:20171018122407j:plain
メルアド・ニックネーム・パスワードを入力すればすぐに登録できるので、先に済ませておきましょう。


そして、ダッシュボードにある「+」アイコンをクリックします。
f:id:paiza:20171018122422j:plain


美しくデザインされたWebサイトのテンプレートが一覧で表示されます。
f:id:paiza:20171018122433j:plain

13種類のカテゴリに分かれた数百種類のテンプレートが用意されているので、自分のイメージに近いものを選択しましょう!
(このテンプレートは、あとから自在に編集することができます)


気に入ったモノが見つかったら、マウスを近づけて表示される「VIEW」アイコンをクリックします。
f:id:paiza:20171018122447j:plain


テンプレートの詳細画面になるので、画面をスクロールしてページの構成やデザインをチェックしましょう。
f:id:paiza:20171018122459j:plain
問題なければ、右側にある緑色の「編集」アイコンをクリックします。


すると、そのままWebサイトを編集できるエディタ画面に切り替わります!
f:id:paiza:20171018122514j:plain
あとは、この画面上でテキスト・画像を変更したり、多彩なコンテンツを追加するなど…自分好みにカスタマイズしていきます。

■Webページをカスタマイズしよう!

それでは、「Seicenta」の編集エディタを使って、Webページを自分好みにカスタマイズしていきましょう!

方法は簡単で、編集したい箇所をクリックすると「ツールバー」が表示されるので、そこからさまざまな編集を行うことができます。


例えば、テキストを編集したければ、その箇所をクリック。すると、以下のようなツールバーが表示されます!
f:id:paiza:20171018122536j:plain
「Edit title」という表示が出るので、ここから編集できます。


好きな文字をそのまま入力したり、カラー・フォント・サイズ・配置…など、細かい調整も画面上で簡単に編集可能です。
f:id:paiza:20171018122548j:plain


また、背景画像を変更したければ画像周辺をクリックすると表示される「メディアアイコン」をクリックしましょう。
f:id:paiza:20171018122603j:plain


すると、無料で利用可能な高解像度の画像がズラッと表示されます!
f:id:paiza:20171018122616j:plain
キーワードで検索することも可能で、気に入った画像が見つかったらクリックするだけ。


このように簡単に背景画像を変えられます!
f:id:paiza:20171018122633j:plain
(※自分が用意した画像をアップロードすることも可能です)


さらに、新しいコンテンツを追加したい場合は「+」アイコンをクリックしましょう。
f:id:paiza:20171018122646j:plain


およそ20種類以上のカテゴリから、数百種類に及ぶグルーピングされたWebコンテンツが一覧で表示されます!
f:id:paiza:20171018122657j:plain
ヘッダー・フッター、スライド、ギャラリー、フォーム、料金表、ブログパーツ、ショップ…など、すぐに利用できるものばかり!


例えば、「フォーム」のカテゴリから好きなものを1つ選んでみましょう!
f:id:paiza:20171018122710j:plain


すると、即座に「フォームコンテンツ」が挿入されます。
f:id:paiza:20171018122724j:plain
ちなみに、input要素やButton要素など個別でスタイルを調整することも可能です。


もちろん、「送信」ボタンをクリックしたあとにメッセージを表示したり、自分のメルアド宛に送る処理も簡単に設定できます。
f:id:paiza:20171018122737j:plain


また、画面右側にある「設定」アイコンをクリックしてみましょう。
f:id:paiza:20171018122749j:plain


「フォームコンテンツ」全体のスタイルを調整することができます!
f:id:paiza:20171018122802j:plain
margin・paddingやサイズの調整、さらにカラーの変更やレイアウト変更などの見た目も大きく編集することができるので便利です。

このように、マウスによる直感的な操作でどんどん好きなコンテンツを追加していき、細かい部分を自分好みにカスタマイズしていくのが基本的な使い方になります。

ちなみに、グルーピングされたコンテンツ以外にも、「テキスト」や「画像」など個別のパーツを組み合わせて独自のコンテンツも作れるので、かなり自由度の高いWeb制作を実現できるでしょう。
(HTMLコードを記述してコンテンツを作るこも可能です)

■Webサイトを公開しよう!

ある程度、Webサイトが完成したらネット上に公開してみましょう!

まずはプレビュー機能を使って、PC・タブレットスマホでどのように表示されるかを確認しておくと良いでしょう。
f:id:paiza:20171018122827j:plain


それぞれの端末ごとに、クリックするだけで自動的に表示が変換されるので便利です。
f:id:paiza:20171018122836j:plain


問題なければ、画面右上にある「Publish」ボタンから「Update temp url」のアイコンをクリックします。
f:id:paiza:20171018122847j:plain
初回は「サイト名」を入力する画面になるので、好みの名称を付けておきましょう。


これだけで、Webサイトがネット上に公開されます!
f:id:paiza:20171018122857j:plain
自動的にサイトのURLも生成されているので、あとはこのURLをメールやSNSなどでシェアすれば誰でも閲覧できるようになるわけです。

■オススメの便利機能!

Seicenta」は誰でも本格的なWebサイトを手軽に構築できる先進機能が多数盛り込まれているのですが、特に便利なオプション機能を最後にご紹介しておきます!

画面左側にある「設定」アイコンをクリックしてみましょう。
f:id:paiza:20171018122922j:plain


Webサイトのスタイルやレイアウトを編集できる画面が表示されるのですが、その中に「ウィジェット」を追加できる機能があります。
f:id:paiza:20171018122933j:plain
これはクリックするだけで、SNSボタン、チャット機能、画面トップに戻るボタン、独自コード追加…などの機能を組み込めるようになっています。


例えば、「SNSボタン」と「チャット機能」をクリックすれば、すぐにでもWebサイト上で利用できるようになるのです!
f:id:paiza:20171018122947j:plain
( チャットは別サービスとの連携になります(無料) )

このように、多機能なWebサイトを作れるので、制作の幅が広がりますよ。

誰でも本格的なWebサイトが素早く構築できて、そのままネット上に公開するまでを完結できるサービスとしては完成度が非常に高いと思います。

■HTML/CSS講座も公開中!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は、10/10(火)から【全編無料】となりましたので、ぜひごらんください!

■まとめ

今回は、「Seicenta」の基本的な機能を駆け足でご紹介しました!

まだまだ紹介しきれないくらい多機能なサービスとなっており、標準で日本語化できたりSEO関連の設定や複数ページを組み合わせたWebサイトを作成できるなど、活用範囲はとても幅広いです。

2017年10月時点において、ほぼすべての機能が無料で利用できるのも大きな特徴なので、ぜひみなさんもオリジナリティ溢れるWebサイトを作ってみてはいかがでしょうか。


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza