デザイン

サイト制作の全記録

こんにちは、サキです(@sar__design)。

この記事では、先日自分のポートフォリオサイトをリニューアルしたので、リニューアルの過程を記録としてまとめています。

  • ホームページやサイトを作る過程が知りたい
  • Webデザイナーになりたい/勉強中の方
  • wixでのサイト制作に興味がある

上記のような方の参考になれば嬉しいです。

ちなみに今回ご紹介する完成したサイトは、wixを使用して制作しました。下のボタンから飛べます。

今後もちょくちょく更新していきます!の予定!
良ければ率直な感想をいただけると嬉しいです〜〜!

また今回サイトと合わせてロゴの制作も行いましたので、良ければこちらもご覧ください。

CRESdesignのロゴができるまで 屋号を決める 個人で活動しているので自分の名前からとったような屋号でも良かったのですが、せっかくなのでちゃんと屋号を決めることに...

どういうサイトにする?

今回制作するサイトの目的は、クライアント様にみてもらうためのサイトを作りたいと考えていました。

まずは、研究や市場調査を兼ねてWebやグラフィックのデザイナーとして働いているフリーランスの人のサイトや一般のWebやデザイン制作会社ホームページ、ポートフォリオサイトなどをSNSで検索したりGoogle検索したりまとめサイトをみたりしました。これはサイトの構成を参考にするためです。

配色やレイアウトの参考サイトはまとめサイトで探したり、Pintrestを活用したりしました。

検索して気に入ったものや参考になりそうなものは全てキャプチャを撮ったりしながら、サイトの構成からトンマナも含め方向性を決定し、要件を以下のように決めました。

  • ターゲットはお客様。企業様というよりは個人様向け。
  • ホームページ制作が初めての人やITの知識があまりない方、PC操作は最低限(ネットサーフィンをしたりSNSを見るくらい)の操作は可能な人
  • なるべくお問い合わせへのハードルを上げたくない、少なくしたい

上記を実現するために、

  • 料金は載せる(できればこのサイトだと〇〇円〜みたいな指標があればなおいいかも)
  • 制作の流れを可視化する
  • よくある質問を設置
  • お問い合わせボタンを各ページ下部に設置
  • LINEでの問合せ対応をすること

をポイントとして、構成を決めました。

  • トップページ
  • アバウトページ
  • 制作メニュー・料金表
  • 制作実績
  • 制作フロー
  • FAQ
  • お問い合わせフォーム

まずはページタイトルは決めず、内容がわかる形で必要なページを箇条書きで書き出しました。

サイトデザインや配色については、私がよく参考にするお気に入り書籍を以下に載せてみたので、気になる方はぜひチェックしてみてください。

その名の通り、Webサイトがジャンル別で紹介されている本です。Webデザインのお仕事の時は必ずと言っていいほど1回は開きます。手元におきながらデザイン進めるのもおすすめ。

配色の本ですが、掲載されているデザインが素敵なものばかりでみているだけでワクワクする本です。どちらかというとグラフィック寄りですがWebにも応用できると思います。

これも見ているだけで楽しくなる本です。白と黒+3色だったり、カラー3色でデザインされている例もあり、配色の参考になります。

ワイヤーフレームの設計

WF上でレイアウトを組んで、配色(メイン、ベース、アクセントカラーのカラーコード)とフォントの種類、文章まで決めました。

WFから実装までに進むのに期間が空いちゃったり、デザインがあまり気に入らなかったりで、なんだかんだ実はトータルで3回ぐらい作り直しました……w

初回は急にWixで制作に入ってしまい途中で挫折、2回目もWixで制作進めて仕事が忙しくなり後回し後回しになり挫折、3回目はXDでWF設計するも制作中に1ヶ月くらい間が空いてしまい、なんとなく無かった事に。

4回目の正直です。

時間が経ってしまうとそれまで作ったデザインが気に入らなくなってしまうという、私的あるある……。やる時は期間詰めてやらないとダメですね。

ちなみにWFはXDを使用して制作しています。

wixで作るときは修正も簡単だからWFも作らず、いきなり制作してしまう方もいるようなのですが、サイト全体のトンマナやレイアウトの統一感を崩れないように設計・確認したいという理由から私は最低限WFはXDで作ります。

あとテンプレートを使用するとそのテンプレートのデザインに引っ張られてしまったりするので、完全オリジナルにしたい場合はWFから自分で制作します。

wixはサイトの動作が重たかったり、挙動がおかしくなることも度々あるので、実装をスムーズに進めるという意味でもWF設計は私には欠かせない作業です。

クライアント様とやり取りをする場合は、どこにどれくらい画像やテキストが入るかを可視化して共有するためにこのXDができた時点で送って準備していただきます。

それからクライアント側から修正依頼されるハードルを下げたいということ、全体像が見えた方が画像の選別やテキストの用意が楽になるのではないか、と思ってこの方法をとっています。

テンプレートが用意されているので、テンプレートを使用してもいいのですが、いらない箇所は削除することや、下層ページはどのみち一からのデザインが必要なケースが多いことからもそうしています。

あとXDも使えた方がかっこよさそうという下心

WF設計のXD画面

左二つは参考サイトのキャプチャを貼ってあります。

今回は自分用ということもあってそこまで作り込んではいませんが、サイトの全体像が見えるくらいには作っておくと後が楽です。

参考サイトのキャプチャが二つしかありませんが、参考にしたサイトはもっとあります。デュアルモニタなので、もう一方にクロームのタブが開きまくってました…

Wixに実装する

カンプ制作は省略。

Wixに実装していきます。

今回使用したのは「白紙テンプレート」です。

wixテンプレート選択画面

ここからは作ったWFを見ながら、サイト構成していきます。

一番最初にカラーパレットを作ってしまった方が、wixで使用するパーツ(ボタン、ボックス、ラインetc.)も作ったカラーになるのでおすすめ。

おすすめボックスにカラーパレットに対応したボックスが表示されます

もちろん、ここからのデザイン変更もできるし、新たに作ったものは履歴から再利用できます。

フォントも使って登録しておくと、H1、H2……それぞれを選択したときに登録フォントが使用できるのでこちらもおすすめ。

フォント種類だけでなくサイズ・カラーなどの情報も保存されます。

これらを上手く使いながらひとつひとつ地道にサイトを作り上げていきます。

お知らせと制作実績の実装について

お知らせの項目と制作実績は更新が簡単になるようにブログ機能を使用しています。

サイトにブログはひとつだけ実装できるので、記事をカテゴリで分けて、対応したカテゴリのみを表示するように設定しています。

今回の場合は「お知らせ」「制作実績」のブログカテゴリを制作、お知らせカテゴリをお知らせに、制作実績カテゴリを制作実績ページに表示するように設定しました。

ブログを実装した時点で、更新した記事は全て表示されるページが自動的に追加されますがこちらは非表示にすることでメニューからは見えなくなります。

これで、お知らせにはお知らせが、制作実績には制作実績が表示されるようになります。

ちなみに私がトップページのお知らせ表示で実装しているブログのリスト表示は、コンテンツマネージャーという機能を使用する必要がありますが、やり方はここでは割愛します。もし知りたい方がいればお教えできるのでご連絡ください。

その他実装で工夫したところ

  • 各ページ下部にお問い合わせへのボタンを設置(ページ移動の手間を減らす)
  • LINEを使用したお問い合わせも可能に(問合せへのハードルをなるべく低く……と思ったけど人によっては逆に抵抗あるかも?)
  • 全体のレイアウトはなるべくシンプルに、わかりやすく、既視感のあるサイト(欲しい情報にすぐアクセスしてもらえるように)
  • 配色とフォントでちょっと女性らしさを出す
  • 写真は全てフリー素材、今後差し替え予定
  • まだ公開していない(厳密にはリンクを外した)のですが、私が開講を予定している講座にはブッキング機能を搭載、24時間予約&お支払いができるように (もし興味ある方はこちらからアクセス
  • アニメーションはあえて多くつけずシンプルに。(ニュルニュル動くのが個人的に好きじゃない。待ちたくないすぐ見たい)

独自ドメインの接続

一通りデザインが完成して動作の確認ができたら独自ドメインを接続していきます。

wixは有料プランへのアップグレード後、独自ドメインを接続することができます。

wixの有料プランはいくつかありますが、独自ドメインの接続には月額900円〜のプランにアップグレードが必要です。ちなみに、wixは不定期ですが有料プランの一部を半額セールで販売しているので、可能であればその時期を狙って購入するのがおすすめ。

私はムームードメインでドメインの取得とメールアカウントも一緒に取得したので、ポインティング方式で独自ドメインを接続。

通常はサーバーのネームサーバーを変更するだけでいいのですが、独自ドメインでメールの利用がある場合はポインティング方式での接続が必要です。(サイトは問題なく表示されますが、メールの受信ができなくなります)

こちらも詳しい手順はここでは省略します。知りたい方はwixのヘルプを参照いただくか、私までお問い合わせいただいても大丈夫です。

独自ドメインでサイトが表示&メールの受信ができればこれでサイトは完成!

公開して運用していくことになります。

なぜWixでサイト制作したのか?

私はそもそもWordPressのテーマカスタマイズでサイト制作を進めようと思っていました。

基本的にお仕事はココナラ経由で受けることが多かったのですが、ココナラからくるお問い合わせで「wixでサイトを作って欲しい」「wixでサイトを作ったけど挫折したから作って欲しい」という依頼を受けることが多くなったのです。

特に後者は多く、一度チャレンジしてみたけど挫折してしまったり、そもそもデザインの知識がないからどうしていいか分からない、思ったよりも時間がかかる、というような方からのご依頼は過半数を超えていました。

こちらからwixを提案することはほぼなかったと思います。

そうして制作を何回か進めるうちに、wixができることの範囲の広さ、デザインレイアウトの自由度などに惹かれて、wixメインでサイト制作を受注することになりました。

なので、自分のサイトもwixで作ってみよう、と思ったのです。

あと以前SNSで「wixなにもできないじゃん…」と呟かれていたのを見たので、そんなことないよー!wixでもサイト普通に作れるよー!というのを証明したかったという想いもあります。

最後に

正直育児と仕事の合間で制作を進めたから、という理由もありますが、実は制作に2ヶ月ほどかかっています。

細いところに悩んだり、実装してみたらイメージと違ったり、こっちよりこっちのほうがいいかなあ…と試行錯誤を繰り返したりしていたら結構時間がかかってしまいました。

ちなみにWordPressはプラグインやテーマやPHPのバージョンと相性があったりしますが、その点wixはバージョンの互換性を考慮する必要がないので気兼ねなくアプリを入れたり機能追加したり、アップデートする手間が省けるのはいいなー!と思います。

もちろんwixにもまだ課題はあります。動作が遅かったり、スマホのレイアウトの自由度が低かったり、多言語対応できない箇所があったり……。

ちなみにwixをおすすめできない人は、「なんらかの理由で後々WordPressへの移行を考えている」人。

移行は色々なリスクを伴うので、そもそもしないに越したことはないですし、「とりあえずホームページ欲しいから一旦wixで作っておこう」などと考えず最初からWordpressでの制作をおすすめします。

いかがでしたでしょうか?

もし良ければサイトの感想、ブログの感想共にいただけるととても嬉しく思います!

ABOUT ME
saki
Web & Graphic フリーランスデザイナー。DTPがすき! 個人の方や小さいお店向けに Webロゴ紙媒体デザインしてます。 紙とお酒と音楽がすき