こんにちは、2016年12月から新しいサービスを稼働させたゆーすけ(@yusuke_plmrstn)です。
スタートしたサイン作成サービスの「ご署名ネット」。
サービス開始から多数オーダーもいただいており順調な滑り出しです。ありがとうございます。
実はサービスを開始する前はこのブログでサイン作成サービスを始めたことだけを伝えてBASE決済のリンク先を貼って対応しようかと考えていました。
でもそれだけだとやっぱり味気ない。
作ったサイン例や具体的な申込み手順も紹介したいし、でもそれをブログでやってしまうとゴチャゴチャしてしまいます。
そうであれば自分でホームページを作ってしまおう！という思いで1からホームページを立ち上げました。
初心者がホームページを作るにあたってまず何から取り掛かったらいいのか、何に気をつけておくといいか、効率的に作業をすすめるためにやるべきことは何かなどなど、具体的な例とともにご紹介したいと思います。
1. 事前準備編
2. サイト構築〜公開編
3. 気付き編
でお届けします。
この記事の目次一覧
1. 事前準備編
それではまずホームページを作成する前の事前準備から始めます。
実はこの事前準備の段階を怠ると後で痛い目を見る結果になるおそれがあります。
全ての項目に力を入れる必要はありませんが、大事なポイントを見極めましょう。
ホームページの目的を決める
基本的なところですが、まず何のためにホームページを開設するかを考えます。
僕の場合はネットショップを作るのが目的でした。
人によっては僕と同じようにネットショップを作る人、ほかにも写真ギャラリーを作る人、会社のホームページを作る人など目的は十人十色のはず。
どうしてこれが大事なのかというと、この後で紹介するホームページのテーマ設定（デザイン）に影響してくるためです。
ホームページのデザインが与える影響は大きく、目的に応じたテーマを選ぶことが大切なんですね。
まずは目的を決めましょう。
ホームページのタイトルを決める
開設したいホームページのタイトルを決めます。
今後ずっと付き合っていく名前になるのでしっかり考える必要がありますね。
コンテンツを作成していく中でもっと相応しいタイトルを思いつくことがあるかもしれません。
その時はタイトル変更すればいいのですが、この後で紹介するドメインに影響が出る恐れがあるため可能であればタイトル変更は出来るだけ避けたいところです。
必要なサービスへの申込み
ホームページ開設に必要ないくつかのサービスに申し込みます。
・ワードプレス
・エックスサーバー
・お名前どっとこむ
ここではワードプレスを使ってホームページを作成することを前提にしています。
ワードプレスとは数あるサイト作成サービスの中でも世界シェア率No.1のサービスのこと。
実は世界中にある全てのサイトの4分の1がワードプレスを使って作成されています。
全世界のサイトの4分の1はWordPressで作られている – GIGAZINE
僕がワードプレスを選んだ理由は豊富なサイトテーマが用意されていることもありますが、このダントツのシェア率も関係しています。
それだけ多くの人が利用しているのであればサイト作成で行き詰った時でも解決のための情報を検索しやすいと思ったからです。
事実、ご署名ネットのホームページを開設するにあたってわからなかったことは全てネット検索で解決しました。
もしこれがマイナーサービスを利用していたら本屋に行ったり詳しい友人に尋ねたりして必要以上に時間をロスしていたことでしょう。
ワードプレスを利用するためには自分でレンタルサーバーを借りてドメインを取得する必要があります。
インターネット上に自分専用のスペースを借り（レンタルサーバー）、そこでインストールしたワードプレスのサイトにサイト情報を紐付ける（ドメイン）というイメージです。
レンタルサーバーも会社によって値段はピンきりですが、あまり安いところはアフターサービスが悪かったりサーバーそのものが不安定なことがあります。
おすすめはエックスサーバー。
多くのサイト運営者が利用する実力No.1のサーバーです。
非常に安定したサーバーで一番安いプランでも十分すぎるほどのサービス内容です。これを選んでおけばまず間違いありません。 
次にドメイン選び。
ドメインとはサイトURLの〜.comとか〜.netのこと。たとえばムクッといこうブログの場合ドメインは「mukutto.com」になります。
ご署名ネットだと「gosyomei.net」がドメインです。
取得時にお金がかかるのと1年毎の更新時にお金がかかります。
「.com」や「.net」の種類によってお金は違いますが、安いものだと取得だけで100円くらい、更新料で年間1000円くらいから選ぶことが可能。意外と安いでしょ？
ドメインを取得するためのサービスもたくさんありますが、頻繁にセールをやるお名前どっとこむが大手で間違いありません。
ドメインは自分で自由に決めることができますが、僕は覚えやすさを優先してホームページタイトルと同じ名前にしました。
さっき「ホームページのタイトルを決める」の時にタイトルを変更するとドメインに影響が出るといいました。
実はドメインは一度決めると変更することができません。新しく取得し直すしかないのです。
タイトルとドメインが違っていても気にしない人はそれでも構いませんが、統一したほうが名刺を作ったり人に紹介する時でも覚えてもらいやすくなります。
使わないドメインは更新料を払わなければ自動的に解約となり更新料はかかりません。
つまり取得時の数百円の出費だけで済むというわけ。
額になおすと少額かもしれませんが、無駄なお金はかけないようにしましょう。
ワードプレスのテーマを決める
レンタルサーバーを借り、ドメインを取得してワードプレスをインストールしたら今後はワードプレスのテーマを決める必要があります。
テーマとは要するにサイトのデザイン案のことをいいます。
僕のこのブログでは「Stinger7」という無料テーマを使用し、ご署名ネットでは「Origami」という無料テーマを使用しています。
テーマはそれぞれ特徴があり、サイト全体の雰囲気を決めるだけではなくサイトの運営目的に適したデザインや機能を活かすための重要な選択になります。
ワードプレスでは無料・有料問わず何万ものテーマの中から好きなものを選ぶことができます。
あれもこれもと機能を追加するとゴチャゴチャしてしまいユーザーが離れてしまいます。
かといってシンプルにしすぎても利便性が落ちてやっぱりユーザーは離れてしまいます。
テーマ選びの詳しいコツについてはこちらを参考にしてみてください。
WordPressのテーマ選びで気をつけるべきポイントとオススメテーマ7選 | 株式会社LIG
僕のように情報系の知識がない人がテーマを選ぶ時に基準にしてほしいことがあります。
それはネット上に同じテーマを取り扱った参考記事があるかどうか。
テーマ名で検索してたくさんヒットすれば使ってよし、逆にほとんど参考記事がないようなテーマは避けるほうが無難です。
ブログはHTMLやCSSという専用のコンピューター言語を使うことによりデザインの変更をしたり機能を追加することができます。
テーマに最初から備え付けのデザインだけだと他の人が使っているどこかで見たような同じ仕上がりにしかならず、オリジナリティを出すためカスタマイズしようと思うとどうやってHTMLやCSSを変更すればいいのか壁にぶつかります。
その時に参考になる記事が多ければ多いほど思い通りのサイトを作れるというわけですね。
僕がご署名ネットのホームページを作るにあたり選んだテーマは「Origami」ですが、最初は「Natural Press」という無料テーマで作っていました。
おしゃれな機能がついていて無料で使えるというのでこれをベースにして作り始めましたが、途中でもっとシンプルなほうがホームページには向いている（というか自分が作りたいデザインを作りやすい）と感じ、テーマ変更しました。
テーマを変えても記事の内容は引き継がれますがデザインは最初からやり直しになります。
無駄な時間を使わないためにも事前にサイトイメージをしっかり作っておきましょう。
2. サイト構築〜公開編
ホームページを作るための事前準備が整いました。
あとはコンテンツを考えたりデザインを変更したり、公開に向けて準備をしていくことになります。
ブログを作成する場合はデザインよりもコンテンツが重視されます。
ショップサイトを作る場合はコンテンツよりも見た目や導線を重視する場合があります。
ご署名ネットはまだまだ発展段階でレイアウトも変更を加えている最中ですが、ホームページに訪問していただいたお客様にまずは「お？なんか中身を見てみたいな」と思ってもらう必要があるわけです。
そういうわけでご署名ネットのホームページではフラットデザインを採用し、極力シンプルに、かつ優しい雰囲気を出すための色使いにもこだわりました。
ネット上には星の数ほどのショッピングサイトがありますよね。
店頭販売と違い相手が見えないネットショッピングだからこそ、サービスの顔となるホームページでお客様に安心を感じていただき、サービスを利用したいと思っていただく必要があります。
最初にもご紹介したように、運営するホームページの目的に応じたレイアウトやデザイン作りが重要になります。
ホームページの雰囲気を決める
ページの雰囲気はとても重要です。
ここで決めた雰囲気はこれから作成していくコンテンツにも影響を与えることになるためしっかり考えましょう。
ご署名ネットはフラットデザインを採用して優しい雰囲気を出すことを意識しました。
しかし実は途中まで作っていたページは今とは違うもう少し堅いイメージのサイトでした。
↑ こんな風な毛筆のロゴを考えていたり、
↑ どこかで見たことあるようなありきたりなイメージを作っていたりなどなど。
デザインを作っていく中でシンプルさとデザインを重視しようと考え方を変更したため、いちからやり直すことにしました。
ここで無駄な時間を使ってしまいましたが、テーマを決めておく大切さを学ぶことができたのでいい経験になりました。
文字は白抜き
ご署名ネットで使っている文字は基本的に白を基調としています。
これも見た目と雰囲気を考えてのことですが、人によっては見辛いということもあるかも。
文字を白にするとスッキリした独特な印象を与えることができます。
ところがこれには欠点があります。
ワードプレスの編集画面にしろ MarsEdit（エディター）にしろ背景が白なので編集中の文字が見えません。
文字の色を白に変更するのは入力も全て終わった一番最後の段階です。
そこまでは比較的ラクですが、あとから変更を加えようとすると文字をいちいち反転させないとどこに何を書いているか読めません。
こんな時に役に立つのはテキスト編集モードです。
ワードプレスの場合だと編集画面の右上にビジュアルとテキストを切り替えるボタンがあるのでテキストを選択します。
するとこんな具合にタグ入力の画面に切り替わります。
こうすれば色を変えた後でも修正が楽になります。
パッと見ると文字だらけでタグなんてわかんないよーという人もいるかもしれませんが、これも勉強のうちです。
僕も完全に理解しているわけじゃなくてわからないところはググりながら使っていますが、テキストで見るほうがわかりやすい時もたくさんあります。
子テーマを作成する
ワードプレスのテーマをカスタマイズする場合、元データを直接編集してしまうとデザインが崩れてページが表示されなくなってしまうなど取り返しのつかない失敗をすることがあります。
そのため編集したいデータのコピーを作り、そのコピーに編集を加えてデザインを変更させる必要があります。
元データを親テーマというのに対し、コピーしたデータを子テーマといいます。
よほど情報系の知識がある人を除き、ワードプレスでデザインをカスタマイズする時は子テーマに変更を加えるのが一般的です。
カラムの数を決める
カテゴリーや人気記事を表示する領域、いわゆるサイドバーを表示させるかどうかを決めるためカラムの数を考えます。
たとえばこのムクッといこうブログをPCから見た場合、記事の内容を読む領域、カテゴリーや人気記事を表示する画面右側の領域にわかれています。
これはカラムが2つという考え方をします。
一方でご署名ネットはPCで表示してもサイドバーが存在していません。これはカラムが1つという考え方をします。
ブログでは2カラム、もしくは3カラムが多く使われます。
ユーザビリティーを考えた時にサイドバーがあるほうが親切設計ですしブログの滞在時間も長くなります。
企業のホームページや商品販売のページでは1カラムが多く見られます。
紹介したい業務内容やサービスをインパクトを出して紹介したいケースが多いので1カラムが使われます。
カラムの数が与える影響はこちらを御覧ください。
ワードプレスのテーマによってカラムの数を変更できるものがあります。
HTMLやCSSを自分で変更してカラムを変えることもできますが上級者向け。
使いたいテーマでカラム設定がどうなっているのか確認しておきましょう。
メニューの項目を決める
ヘッダーに表示するメニュー項目を決めます。
現在でも少しずつ変更を加えているので最終型ではありませんが、サイト立ち上げ時には次の7項目でした。
・TOPページ
・作品例
・注文の流れ
・料金
・オーダーフォーム
・よくある質問
・問い合わせ
現在では「TOPページ」の項目を削り、「お客様の声」を新しく追加しています。
あれもこれもと追加したくなりますが、多すぎるとメニューが2段になってしまいデザインが崩れてしまうので注意。
メニュー項目に入りきらないものはフッターの情報欄にまとめました。
・運営者の紹介
・コラム
・SNS
ファビコン作成
見た目をよくするためにファビコンを作成しました。
ファビコンとはブラウザを開いた時にタブに表示される小さい画像のことです。
自分で好きな画像を作りサーバーにアップロードすると表示されるようになります。
具体的な設置方法はたくさん記事が紹介されているので探してみてください。
サイトカラーを決める
ご署名ネットのサイトでは色に統一感をもたせて全体的にやわらかい雰囲気になるよう配色に工夫を加えています。
色の組み合わせは見る人に様々な影響をあたえるといわれています。
そんな時に参考にしたのはこちらのサイト。
【こんなにも凄い】色が人の心理と行動に与える影響とは | freshtrax | デザイン会社 btrax ブログ
ご署名ネットで使う色は主に次の4色です。
それぞれの色の正式名称はわかりませんが、16進数で表すと上記のとおりです。
配色のバランスを考えた時に個人的に好きな感じだったのでこれらの色を採用しています。
サイト内で使う画像の作成
サイトで使うロゴ画像やちょっとした挿し込み画像はもちろん手作り。
素材はフラットデザインに似合うシンプルなものをネットで見つけて使っています。
ご署名ネットで使っているアイコンのほとんどはこちらのサイトからお借りしているものです（商用利用可）。
このサイトのポイントは、
1. アイコンの種類が豊富
2. フリーで使える。
3. 商用利用可能
4. ダウンロードする大きさと色を自由に選択できる
これらが挙げられます。
この中でも4番目の「大きさと色を自由に選択できる」というのは他の素材サイトにはないメリットです。
サイトの雰囲気に合うように色を選択することができるのでご署名ネットではほとんど白抜きにして使わせてもらっています。
画像編集で使うソフトは “Pixelmator”というアプリ。
たくさん機能があって使いこなせていませんが、レイヤーを使ったり文字を入れたり基本的な使い方はできます。
オーダーフォームの設置
ご署名ネットでご注文を受ける時のフォームはワードプレスプラグインの “Contact Form 7”を使っています。
自分で好きな項目を追加・削除することができ、フォームが送信された時に通知してくれる機能があったりとかゆいところに手が届く有能プラグインです。
手を加えているのは次の2箇所。
・送信ボタンのフラットデザイン化
・レスポンシブ対応
このうちレスポンシブ対応はしっかりとやっておく必要があります。
Contact Form 7をそのまま使うとスマホでページを表示した時に入力フォームが画面から突き出てしまいます。
（参照:SiteMiru）
これに対応するためにこちらのサイトを参考にさせていただきました。
簡単に対策することができるので Contact From 7 を使っている人がいたらぜひどうぞ。
お問い合わせフォームの設置
お客様からのお問い合わせ対応のためにお問い合わせフォームを設置しました。
オーダーフォームと同じく “Contact Form 7”を使って作成してもよかったのですが気分を変えて Googleフォームを利用しています。
GoogleフォームはGoogleアカウントさえ持っていれば誰でも使うことができる集計フォームのこと。
入力された内容をGoogleスプレッドシートに自動的に反映させるよう設定すればお手軽にアンケートとしても使うことができる便利なツールです。
公開
ある程度コンテンツがそろってきたら公開します。
僕は設定で “No Index”を選択して公開していたので途中で誰かに気付かれることなくサイト構築を進めることができました。
非公開設定でやるか、No Indexを使うかはお好みでどうぞ。
3. 気付き編
ご署名ネットではお客様から代金をいただいてサービスを提供します。
お金のやりとりが発生する以上はしっかり信頼のあるサイトを築き、誠心誠意対応する必要があります（決してそれ以外のサイトなら手を抜いていいというわけじゃありませんよ？）
今回のサイトは難しい技術やテクニックは一切使わず、素人の僕でもできることだけを取り入れました。
テーマを選ぶともっとかっこいいデザインを作ることもできるでしょうが、自分の中に創り上げたいイメージが出来上がっている場合テーマはシンプルなほうがおすすめ。
イメージを先に考えるか、それともテーマから選ぶかは人それぞれです。
一気に仕上げることが大事
サイト構築は時間がかかります。
作りたいイメージが固まってなくてもドメインだけでも取っておこうとかテーマだけ探してみようかなとか、少しずつでも作業を前にすすめておかないと億劫になってしまいます。
コンテンツ作成もまとまった時間で一気に作成して勢いで公開しないと途中で嫌になってしまう可能性が高いです。
修正はあとでもできる
「この表現はどうなんだろうか？」
「おかしな印象持たれたらどうしようか？」
と悩むことはあっても、とりあえず作って公開しましょう。
ブログと同じで文章やコンテンツはあとからいくらでも修正できます。
悩んでいる時間があったらどんどん作成の時間に使うほうが効率的です。
足りない要素を追加する
実際に運営を始めて後で足りないと気付いて追加したサービスがいくつかあります。
Httpsの導入
安全な接続が確率されるSSL接続に対応させました。
個人情報を取り扱うサイトであれば当然の対応ですが、始めはこれに気付いていませんでした。
具体的な導入方法はこちらにまとめています。
お友達紹介サービス
ご友人を招待していただくと紹介者とお友達にAmazonギフト券300ポイントをプレゼントするものです。
サイト公開時にはアイディアがありませんでしたが、あとで思いついたものです。
漢字サインの作成
これもサービス開始当初は対応していませんでした。
ローマ字サインなら何度も作ったことはありますが、漢字はちょっと自信がなかったんですよね。
今では漢字にも対応しています。
まとめ
技術系の知識がない僕でもなんとか形に仕上げることができました。
もっとかっこいいページを作りたいという気持ちもありますが、まずは公開してみようという気持ちが大事です。
いつまでも寝かし続けてるとそのうち気分が覚めてしまってせっかくのホームページが日の目を見ないことになってしまいます。
余談ですが、次の新しいホームページの案がすでに頭の中に出来上がりつつあります。
今回のことを参考にしつつ、一気に作り上げたいと思います。
