Search

LIVE LIKE A TRAVELER

旅するように暮らす

個人でも「おしゃれ」で「海外っぽい」Webサイトが作りたいならSquarespace(スクエアスペース)はいかが?【作り方解説スクショあり】


個人のブログや店舗のホームページなど、やっぱりオシャレにしたい!ですよね。
でも、プロに頼むお金はない…そんなことも多いのではないでしょうか。そんなときに、Squarespaceというサービスを検討してみるのはいかがでしょう。オシャレなテンプレートが豊富にありますよ。

Squarespace(スクエアスペース)ってなに?

Squarespaceはニューヨークで生まれたウェブサイト制作のプラットフォームです。 使いやすいインターフェースや洗練されたデザインが高く評価され、WordPress(ワードプレス)の強力な対抗馬として今注目を集めています。
WordPressと比較して大きく異なるのは、Squarespaceは、サービスの一部にサーバー契約を含んでいるということ。また、WordPressでは、テーマやプラグインを様々な企業や個人が開発しているのに対して、Squarespaceはそれらを自身で用意しているということです。
SSLも、サーバー側や、コードをいじる必要なく、Squarespaceのデフォルトで対応されています。

こちらのサイトの説明がわかりやすかったので、よかったらチェックしてみてください。
SquarespaceとWordPressの違いとは

残念ながら、まだ管理画面が日本語対応していないので、ハードルが高いかもしれませんが、慣れれば使えそうです。
といっても、Squarespaceで何ができるかわからないと、検討できないと思いますので、私が使ってみた範囲にはなりますが、スクリーンショットを交えて、まとめておきます。お役に立てば嬉しいです!

無料トライアル登録してみよう!

説明を読むだけでは、わからないところもありますので、早速試してみましょう!
14日間の無料トライアル期間が用意されているので気軽に試すことができます。また、無料トライアルの登録では、クレジットカードナンバーは不要なので、メールアドレスとパスワードさえ変更すれば、納得のいくまで触ってみることができます。(サイトを公開する際は必ず有料プランに登録する必要があります)
下記からどうぞ。
https://www.squarespace.com/

登録のやり方は、そんなに難しくないですが、こちらのチュートリアルがわかりやすかったです。
Squarespace〔スクエアスペース〕チュートリアル / 第3回 アカウント作成

テンプレートを選ぶ

次はテンプレートを選んでみましょう。さすが、海外製!という感じで、見ていてワクワクするものが多いです。

各テンプレートのサムネイルの下にハートボタンがついており、押すと「お気に入り」に登録できます。
参考チュートリアルを貼っておきます。
Squarespace〔スクエアスペース〕チュートリアル / 第2回 テンプレートの紹介

【AVENUE】タイトル・メニュー部分のカスタマイズ

ここから、ちょっとややこしいかな?と思ったので、スクリーンショットを貼りつつ、詳しく説明したいと思います。

今回は、こちらのAVENUEというテンプレートを使うことにしました。

テンプレートの中でも、単純な作りで、初めて作る場合は扱いやすいのではないでしょうか。あと、北欧っぽい雰囲気でかわいいw

早速、タイトルとメニュー部分をカスタマイズしていきます。
(画像部分は全て入れ替えたところからスクリーンショットを撮っているので、少しわかりにくいかも!)

左側のメニューから、必要なメニューを選びます。
今回説明するのは、Pages, Design, Settingsです。基本的なブログサイトでしたら、この3つのメニューで完成すると思います。円形の部分は個人のアカウントページへのリンクです。
まずは、Designを選びましょう。

続いて、Designメニューの中から、Logo&Titleを選んでください。

サイトタイトルとタグラインを入力します。タグラインのところ日本語にしています。日本語でも変な表示にならず、見え方キレイだと思います。

Logo&Titleの中でロゴ、ファビコン、ソーシャルシェアアイコン(OGP画像)の設定もできます。

次はDesignの中のSite stylesを選択してください。個人的にここが結構すごいと思っていて、WordPressでは出来ない場合が多かったタイトルのフォント変更や、タイトルとメニューのレイアウト変更ができます!(WordPressは無料テーマしか使ったことがないので、有料テーマだったらできるかもしれません!)ここが変更できると同じテーマを使っていても、かなり印象が変わるので被りにくくて嬉しいです。
タイトルの部分を選択するとデザイン上で四角に囲まれます。(デザイン上で囲まれた部分に対応するメニューのみが左側に残るようになっています)

Site titleを選択。

Site titleのところで、フォントや文字サイズを変えたり、いろいろカスタムできます。

OptionsのLayout Styleでヘッダーのメニューとタイトルの位置関係を変更できます。今はCenterになっている状態です。
Centerに変えたときに、余白が微妙だったので、デザイン上でドラッグ&ドロップして調整しました。でも、「そこは動かせないんかい!?」みたいなとこもありますねw

試しにLayout Styleをデフォルトと同じ、Leftに変えてみました。

やはりこちらがデフォルトなので、余白は綺麗かなと思います。1番下にReset styles to defaultsというボタンが用意されているので、一気にデフォルトに戻したいときは、このボタンを使ってください。

コンテンツを追加する(ギャラリー・ページ)

コンテンツの追加も、WordPressの管理画面に慣れている人間にとっては、ずっとWordPressの「カスタマイズ」をいじっているような感覚で、少しややこしかったですが、慣れると大丈夫だと思うので、説明していきます。

まず、Home>Pagesと選択します。

コンテンツ追加の方法は、いろんなやり方があるようなのですが、とりあえず、私がやりやすいと思った方法をまとめますね。

TOP NAVIGATIONの右横の+マークを選択。

Create New Pageっていうポップアップが出てくるので、その中から、自分が作りたい機能を持ったページを選びます。AVENUEの場合は、ギャラリーが目立つテンプレートなので、まずギャラリーから作っていきたいと思います。(トップページのケーキの部分は全部ギャラリーページです)

これで新しいギャラリーができました。ここでページ名を変えることもできます。ギャラリーページの中身をいじる場合は、ページの名前の上にカーソルを持ってくるとギアマークが出ますので、そこを選択してください。

ギアマークを押すと、全画面が編集モードになります。ちなみにページの上部にある黒い線を押すと、デバイスごとの見え方が確認できるようになります。

ここでも+ボタンを選択。

ポップアップが出てきて、動画か画像を挿入できます。動画は自分のPC内からはもちろん、unsplashというストックフォトの中から探せるようになっています!ワンストップでできるのは嬉しい!Search Imagesを押してみましょう。

Free, Premiumが分けて表示されるのもありがたいです。最近、選択したイメージはRecentの中にあります。

気に入った写真を選んでください。

Add to siteを選択。

画像を入れ終わったら、ギアマークを選択して、テキストなどを入れていきます。

Navigation title, page title,description(ページ内のテキスト)も入れていきます。

下にスクロールすると、ページのURLをいじるところもあるので、ページ名と合わせておくといいと思います。
今回は使いませんが、SET AS HOMEPAGEを押すとトップページとして指定されます。内容を入れ終わったらSAVEを押してください。

このままだと、ナビゲーションの中に入ってしまうのですが、今回はcakesの下層に持っていきたいと思っているので、調整します。Pagesに戻ります。

左側にサイトマップが表示されている状態です。ドラッグ&ドロップで、好みの場所に移動させることができます。

このように、cakesの一番下に移動させました。

移動させ終わった状態で、ホバーして、ギアマークを押し、ポップアップ内のSAVEを押してください。(ここでSAVEを押すことで、cakesに当たっているスタイルと揃うみたいです。具体的には、ページ下部のギャラリーのサムネイルが出るようになります。)

こんな感じで、cakesの1番下に入りました。

次はギャラリー以外も作ってみます。先ほどと同じく+ボタンからPageを選んでください。

テキストと画像を組み合わせた様々なレイアウトがあります。今回はシンプルにBlankを選んで、START EDITINGを押します。

ページの編集画面はこんな感じです。テキストを書くところと、+ボタンが用意されています。

+ボタンを押すと、またいろいろな要素がポップアップで出てきます。

フォームやマップ、カレンダーも入れることができます!

TwitterやInstagramなどソーシャルアカウントのブロックを入れられるのもいいですね。個人店舗などの場合、SNSで顧客と繋がるきっかけになりますし。

コンタクトフォーム

ここからは詳しい作り方は割愛してますが、Squarespaceでできることが伝わればと思います。
WordPressのようにプラグインを入れるのではなく、あくまでSquarespaceのデフォルトのエディタからできる範囲です。

イベント

イベントカレンダーの中にイベントを表示して、カレンダー上のイベントをクリックするとイベント詳細ページに遷移するということができます。個人サイトでこれができるのは画期的かと思います!

MAP

マップの色合いなども管理画面から変更可能です。

ブログを追加する

ブログという機能もありまして、ページとは少し使い方が違うと感じたので、まとめておきます。

まずは同じく+マークを押して、ポップアップが出てきたらブログを選ぶ。

このサイトではKiki’s Kyotoの部分がブログ機能になります。

ブログ部分は、こんな感じで記事が新着順に1カラムで一覧として並びます。

ブログの新規投稿を追加したいときは、左側のサイトマップから、ブログ部分を選択すると、編集画面になるのでDRAFTSというタブを選択してください。This blog contains no item~と書いてあるところをクリックすると、投稿を作成できます。

ポップアップが出てきますので、タイトルやテキストを入れていきましょう。画像など入れたいときは下の+マークを押します。

+マークを押すと、ポップアップが出てきて、画像以外にもいろいろ入れられます。

公開は、SAVE&PUBLISHで行います。SAVEは下書きを保存です。

Squarespaceの素敵な機能!イメージエディター

Squarespaceには「こんなの欲しかった!!」という便利な機能があります!特に、ありがたいと思ったのはイメージエディター。画像を選択して、EDITボタンを押すと、IMAGE EDITORのボタンが表示されますので、選択してください。

これすごくないですか!?Squarespaceにアップしてから、画像加工できるんです!Effectsのところでフィルターかけたりもできます。ワンストップでできるのは助かるー!(WordPressでもプラグイン入れたらできるかもしれませんが…)ブログの写真って実は、結構、明るくしたり、彩度上げたりしないとキレイに見えないんですよねw
Google PhotoやCanvaでもできるのですが、サイト上でできちゃうのは本当に楽。

ドメインやSEOの設定(Settings)

さて、コンテンツ系の話はいったん置いて、事務的なところも書いておきます。

Home>Settingsを選んでください。

Domainsを選んでください。

独自ドメインを設定することもできるのですが、ドメイン取得はSquarespace自体の利用料金とは別料金になるので、今回はBuilt-in Domainを選択。(他社管理のドメインを移管することもできます)
サブドメインと呼ぶのですが、.squarespace.com以前の部分を自由に変えることができます。デフォルトでランダムにサブドメインが割り当てられているのですが、サイトの内容に合わせたものに変えた方がいいと思います。(ちなみに、私の場合はrust-grapefruit-hf57.squarespace.comというドメインがデフォルトで割り当てられていました)
amebloとかだと、ドメイン以下のディレクトリがサイト独自のアドレスとして割り当てられるのですが(例:https://ameblo.jp/○○○○)アドレスの冒頭部分が自サイト独自のものになるので、見栄え的にありがたいですね。

ドメインを変えたあとで、スクショ撮っちゃったから、わかりにくいですが、デフォルトのドメインを選択すると、Site IDを入力できるフィールドが出てくるので、任意のIDを入れてください。それがサブドメイン(アドレスの冒頭部分)になります。入れ終わったらRENAMEボタンを押す。

Squarespaceの公開方法

14日間のトライアル期間は公開はできず、製作者のアカウントでログインしている人以外からは見えない状態です。
ログインしてない人にはこんなふうに見えると思います。(違うドメインで試したんでちょっとわかりにくいですが)

サイトの下にUpgrade Nowというボタンが表示されるので、選択。

パーソナルプランかビジネスプランを選びます。今回のサイトだったら、パーソナルプランで十分かと思います。

パーソナルプランの機能に該当しない機能を使っている場合はオフになります、とポップアップが出て来ます。特に、そんな機能を使ってなくても出て来るみたいですね。今回のサイトも、公開後、得に機能が消されることはなかったです。

なぜか、ここうまくスクリーンショットが撮れませんでした…
ここで、入力した項目は大体、下記だったと思います。
更新期間を選択(annual(年間)かmonthly(月間))
※今回は試したいだけだったので、monthlyを選びましたが、年間の方が割安になります。
名前
郵便番号

カード番号
カードの裏の番号

SUBSCRIBEを押すと、自分が選択したプランの確認と、自動更新になることがポップアップで出て来ます。自動更新は契約後いつでもオフにできるので、とりあえずそのまま進めましょう。

すると、こんな感じで、確認のポップアップが出ます。今回はドメインを独自ドメインを取らないのでDONEで。

何でSquarespaceを知りましたかっていうポップアップが出て来ます。SKIPでもokです。

これですでに公開されています。
12/18までの1ヶ月間だけになりますが公開されているので、よかったらご覧ください。
公開前のプレビューだけだと、各ページのURLがよくわからなかったのですが、公開するとわかりやすくなりました。
https://kikis-bake.squarespace.com

https://kikis-bake.squarespace.com

Squarespaceのお値段は?

さて、こんなにいろいろできて、「さぞお高いんでしょう?」っていう感じですよねw
残念ながら、無料プランというのはないのですが、他のサービスに比べて非常に高い感じはないです。
他がどれくらいかかるのかわからないと比較できないと思いますので、例として、独自ドメインが使えるタイプのWordPressで運用していく場合と比べてみたいと思います。
WordPressは、使うサーバーのスペックによって、値段にかなり幅があるのですが、今回は、恐らく1番低価格帯のロリポップサーバーで比べてみたいと思います。

WordPressの場合
WordPress自体の使用料:ナシ
サーバー:ロリポップ ライトプランの場合
1,500円(初期費用)
300円/月(6・12・24・36ヶ月契約の場合 250円/月)
ドメイン:ムームードメインで.comの場合
取得 1,160 円 更新1,480 円/年(2年目から発生)※ドメインの料金はドメインの種類によって異なります。

Squarespaceの場合
パーソナルプラン:16$/月(年間契約の場合12$/月)。基本的なブログや店舗サイトの場合パーソナルプランで問題なさそうです。
ビジネスプラン:26$/月(年間契約の場合16$/月)。ECサイトやGoogleアドセンスの広告を掲載したい場合はビジネスプランにする必要があるようです。
サイトへの広告掲載について:https://support.squarespace.com/hc/en-us/articles/206545597-Can-I-place-advertisements-on-my-site-
独自ドメイン:年間契約にした場合は、1ドメイン無料で取得でき、1年間有効です。2年目以降はドメイン更新料が発生し、ドメインの種類によりますが、毎年20$から50$の更新費用となります。
詳しくはこちら。
https://support.squarespace.com/hc/en-us/articles/205812208

サーバーやドメインを別契約にするのではなく、一括でSquarespaceと契約する形です。複数のアカウントを管理しなくていいので楽ですね。
詳細はSquarespaceのサイト上で確認してみてください。
https://www.squarespace.com/pricing/

Squarespaceを試してみた感想

ちょっと時間はかかりそうですが、チュートリアルのサイトなどを見ながら、慣れていけば使えそう!と思いました。日本語対応していないので、心配でしたが、日本語を入れても特にレイアウト崩れや、ガサガサしたフォントで表示されるなどの問題もなかったです。

EC機能もありますが、お金関係のトラブルがあったときに、日本語サポートがないと少し不安なので、もし私だったらサイト自体で収益が発生しないサイトから導入すると思います。飲食店サイトやブログ(GoogleAdsenseを入れるなら独自ドメイン(追加費用あり)とビジネスプランへの加入が必要)であれば、十分対応できるのではないかと思っています。

管理画面の使い心地がかなりWordPressと違ったのは衝撃でした。
WordPressはこれから、Gutenberg(グーテンベルク)というエディタを導入しようとしており、すでに試すことができます。私は今までWordPressのエディタに特に不満を感じていなかったので、なんでそんなことするんかな?と思っていました。でも、今回Squarespaceをいじってみて、WordPressは、このタイプのエディタに対抗しようとしているんだなと感じることができました。

実際にWordPress側もSquarespaceやMediumなどを意識していることを表明しているらしいですし、現にSquarespaceでGoogle検索するとWordPressの無料版であるWordPress.comのリスティング広告が出てきますww

やっぱり、新たなWebサービスは、英語圏から出てくることが多いですね。日本国内の情報だけ受け取っていたら、不十分だと痛感しました。

今後、どんどんこういったツールが進化してくると思いますので、サイト制作自体は個人でやってしまって、アクセス解析から任せたいとか、写真撮影やライティングのようなもっとコンテンツ的な部分を任せたいとか、今までと違う需要が出てくると思います。サイト制作は軽めに抑えて、紙媒体での広告やSNSとサイトの連携とか、コンテンツの中身作りに時間や予算を割いた方がいい場合だって、もちろんありますもんね。
だからこそ、制作だけを請け負う存在じゃなくて、プラスアルファを持ったパートナーになれるように常にアンテナを張っておきたいと思います!

たとえ日本にいても「旅するように暮らしたい」、そんな気持ちでブログを始めました。経歴:専門商社にて社内ニート、貿易事務を経て、28歳でウェブディレクターへの異業種転職。インバウンド観光系の多言語サイトが強みの会社で働いています。好きなもの:web、映画、旅行。ウェブ業界で学んだことや観光にまつわることを書いています。更新:毎週火曜日20:30更新中です。

Leave a Reply

Name *

Email *

Website

© 2018 LIVE LIKE A TRAVELER . All Rights Reserved.