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.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

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

実務未経験、前職は非IT系…それでもエンジニアになれた方法とは?/転職者・採用担当者インタビュー


paizaでは、転職を経験されたエンジニアの方、未経験からエンジニアになった方、またその企業の採用担当者の方のインタビュー記事を公開しております。

未経験からどうやってエンジニアになったのか、企業選びのポイントや転職で得られたこと、また採用時に見られるポイントや実際のエンジニアチームの働き方などについて、詳しく語っていただきましたのでぜひごらんください。


未経験から転職された方の声

わずか1カ月のスピード就活 弁当店アルバイトからエンジニアに


建築系の法人システムやゲーム、アプリなど、幅広く開発をおこなっている株式会社マリエッタに入社された山本さんと、代表取締役CEOの神谷さんにお話をお伺いしました。


――エンジニア未経験だったそうですが、そもそもプログラミングの経験はあったのですか?
高校の頃から独学でやり始めて、その流れから大学も情報学科に進みました。ただ、生活のために弁当店のアルバイトに明け暮れた結果、7年間在籍して中退することになってしまいまして。もうこのまま弁当店の社員になるしかないのかなと考える時期もありました。

一方で、ずっとプログラミングは好きだったので、日ごろからpaiza.IO(オンライン実行環境)やスキルチェックを使っていましたし、エンジニアになりたいという思いも持ち続けていました。その後、就職で悩んでいたときに、ふとpaizaが転職サイトだったことを思い出したんです。それ以降は、なんとかpaizaを使ってエンジニアとして就職できないかと考えるようになりました。

――就職活動では、何社くらい応募されましたか?
まずはIT企業に勤めることが大事だと思っていたので、業界などで選り好みはせず、東京と地元の福岡というエリアだけ決めて、プラチナスカウトが来た順に4社に応募しました。paizaでAランクをとったあと、今の会社への入社が決まるまで、トータルで1カ月くらいでした。

――かなりのスピード感ですね。周りも驚いたんじゃないですか?
大学を中退していますし、実務も未経験でしたから、先生や親からは「エンジニアとして就職するなんて、そんなに甘いものではない」と言われ……


続きはこちら!
わずか1カ月のスピード就活 弁当店アルバイトからエンジニアに

プログラミング未経験からの挑戦 商社マンからエンジニアに転職


法人向けのシステム開発や運用をおこなっている株式会社コスモルートに入社された宮下さんと、常務取締役の島本さんにお話をお伺いしました。


――エンジニアへのキャリアチェンジおめでとうございます。今回の転職のきっかけを教えてもらえますか?
大学では電子回路系の勉強をしていました。最初の仕事では、さまざまな選択肢の中から商社に就職したのですが、エンジニアも考えていて、悩んだ経緯がありました。

その仕事自体は楽しかったのですが、その一方で、理系で勉強してきたことが生きる部分があまりなくて、次第に「やっぱり自分にはエンジニアのほうがもっと向いているんじゃないかな」という思いが強くなってきていました。そのころにpaizaを見つけて、改めてエンジニアを目指そうと心に火がついたんです。これならたとえ未経験でもスキルをつければエンジニアになれるんじゃないかと思って。一念発起してプログラミングを勉強しました。

――プログラミングの勉強ではどの言語をやっていましたか?
Javaをやっていました。これは単純に、Javaの求人が一番多かったので、Javaができることがエンジニアになるための近道なのかなと思ってやっていました。結果的に採用してもらえたのでやっておいてよかったと思っています。勉強はpaizaと本だけで独学でやっていたのですが……


続きはこちら!
プログラミング未経験からの挑戦 商社マンからエンジニアに転職


その他のインタビュー記事はこちら!
開発業務未経験からエンジニア職への転職を成功させた方へのインタビュー一覧
paiza.jp


paizaで転職された方の声

未経験者だけでなく業務経験者の転職について伺ったインタビューもございます。

マネジメントだけでは生き残れないと思った…開発もできる環境を求めて転職


機械学習によるリアルタイム大規模データ分析プラットフォームを提供しているブレインズテクノロジー株式会社に入社された中澤さんと、執行役員の河田さんにお話を伺いました。


――まず、今の会社に入社するまでの経歴を簡単に教えてください。
大学を出て金融系のSIerに入りました。そこでの経験がキャリアの大部分を占めています。その後、友人とベンチャー企業をたちあげ、さらに前職は大学で勤務していました。

――今回、転職しようと思った理由は何でしたか?
実は、前職の大学での業務が有期だったので、終わりが見えている状況でした。ですから、次は何をしようかという、漠然とした思いはずっと持っていて、転職も自然に考えていましたね。

――SIer、起業、教育機関と、幅広い経験を積まれて今回の転職に臨まれたわけですが、企業選びのポイントはどのようなものだったのでしょう。
それまでの経験がBtoBばかりだったこともあって、BtoBをやっているかを重視して応募していました。あとは、できれば自社サービスをやっている企業に行きたいなとは思っていましたね。

さらに、面接では3つのポイントを見ていました。1つめは……


続きはこちら!
マネジメントだけでは生き残れないと思った…開発もできる環境を求めて転職


その他のインタビュー記事はこちら!
エンジニア中途経験者へのインタビュー一覧
paiza.jp



paiza転職は、転職時のミスマッチをなくし、エンジニアがより技術面にフォーカスしたやりがいある仕事を探せる転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。
paiza.jp
まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。
paiza.jp

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

初心者でもほぼ無料でGitの使い方を学べるコンテンツ7選

f:id:paiza:20171017135800j:plain
Photo by othree
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

開発業務未経験からITエンジニアを目指す方にとって、プログラミングだけでなく、習得しておきたいのがGitの使い方です。

Gitは、プログラミングしたコードの変更などをした履歴を管理してくれるシステムです。

開発をしていると、ファイルを編集前の状態に戻したいとか、間違えて編集しちゃったとか、どれが最新かわからないとか、そういうことがたびたび発生します。(プログラミングの勉強しているときに、コードをいじったら動かなくなってしまって「前の状態に戻したい!!」となった経験がある人も多いかと思います)

そんなときに、バージョン管理をしておけば、コードの変更履歴を管理したり、過去のバージョンのファイルに戻したり…といったことが簡単にできます。そのため、ほとんどの企業がバージョン管理システムを導入しています。

バージョン管理システムには、大きくわけて「集中型バージョン管理システム」と「分散型バージョン管理システム」があります。

集中型のバージョン管理システムにはSVNなどがありますが、リポジトリ(簡単に言うとファイルや履歴を保存する場所です)が置かれているサーバに接続できる環境にいないと、最新のファイルを取得したり、変更したファイルを反映させたり…といったことはできませんでした。

一方、Gitのような分散型バージョン管理システムであれば、リポジトリを複数使って、個人や開発チームごとにリポジトリを管理することができます。また、リモートリポジトリはサーバに置いて、ローカルリポジトリをローカル環境に作っておけば、サーバにアクセスできない環境にいても作業することができます。

上記のように、分散型の方が利便性は高く、最近ではGitがバージョン管理システムの主流となっています。(ただ、SVNを使っている開発現場もまだまだ多いため、「業務のために勉強しよう」という方は、自分の所属先が何を使っているのか確認しておきましょう)

ちなみにGitHubは、このGitの仕組みを利用して、個人・企業問わずにリモートリポジトリの作成・公開ができるサービスです。複数人での共同作業に必要な機能も揃っているため、学校や企業などで広く使われています。

今回は、プログラミング初心者の方が、なるべくコストをかけずにGitの使い方が学べるコンテンツを7件ご紹介していきます。

■Git入門以前

「Gitが何なのか、何ができるのか、何が便利なのか、全然わからない!」という人は、まずこの辺を読んでみるところから読んだ方がよいでしょう。

■Git実践入門

使い方を覚えるには、実際に自分の手でコマンドを打って使ってみるのが一番です。

ドットインストール Git入門

f:id:paiza:20141014152641p:plain
Gitの基本的な使い方が動画を通して学べます。

Learn Git Branching

f:id:paiza:20171017114401j:plain
Gitのブランチ機能をとにかく手を動かして学べるサイトです。Gitのブランチに関する問題をどんどん解いてどんどんコマンドが打てます。チュートリアルから始まってレベルも選択できるので初心者でも大丈夫かと思います。

■書籍

弊社でも「ポケットリファレンス片手にコマンド打ちまくって勉強した」というエンジニアがいたので、「まとまった書籍が一冊ほしいな」という人や「仕事で導入することになったから会社に一冊置いときたいな」という人にはこの辺の書籍がおすすめです。

◆Gitが、おもしろいほどわかる基本の使い方33

Gitが、おもしろいほどわかる基本の使い方33

Gitが、おもしろいほどわかる基本の使い方33

◆独習Git

独習Git

独習Git

◆Gitポケットリファレンス

【改訂新版】Gitポケットリファレンス

【改訂新版】Gitポケットリファレンス

■まとめ

Gitコマンドはものすごくたくさんあるので、まずはよく使われているものを覚えるのがよいかと思います。(Git使いまくってる現役エンジニアでも使ったことないコマンドはたくさんあるぐらいですので…)

ただ、プログラミングと同様、Gitも自分でコマンドを打って使ってみないことには習得できません。まずはチュートリアル的なサイトや本を見て、実際に手を動かしながらいろいろと試してみるのがよいでしょう。



動画で学べるpaizaラーニングには、プログラミングが学べるレッスンだけではなく、「未経験からITエンジニアを目指したい!」という方に向けて、IT業界の構造やエンジニアのキャリアについて学べる「ITエンジニアの就活準備編」もございます。

ITエンジニアの就活準備編」では、エンジニアのキャリアや働き方がわかる「業界構造を学ぶ」、就活で使えるポートフォリオの作り方がわかる「ポートフォリオ制作」のレッスンを公開中。新卒の就活生だけでなく、ITエンジニアとしての転職を目指す方に役立つ動画レッスンとなっております。

paiza.jp





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

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

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


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編