自作WEBサイトをワンランクアップさせるポイント

すぐできる!自作のWEBサイトをワンランクアップさせるための4つのポイント

自作のWEBサイトが、どことなく「コレジャナイ感」がでてしまったり、「パワポで作った資料感」がでてしまうことはありませんか?少しの手間で自作のWEBサイトの信頼性をあげる4つのポイントをご紹介します。WEBデザイナーやWEBマーケターに教えてもらったノウハウで、簡単にでき効果が高くおすすめです。
「カワリニ」編集部

こんにちは、フリーランスエンジニアのアイザワです!
自宅を拠点に、リモートワークでお客さま企業のIT関連業務のサポートをしています。

 

フリーランスのエンジニアとして活動していると「WEBサイトを作って欲しい」というご相談をいただくことがあります。

特に数名で活動されているスタートアップや、NPO、個人事務所を開設された方が多く、サイト制作の予算を抑えたい(15 ~ 20万円程)というご希望がほとんどですが、普通に発注すると予算内にはなかなかおさまりません。

 

最近では、プログラミングの知識がなくても、無料で簡単にWEBサイトを制作して公開までできるサービスが数多く提供されており、すでにご自身で制作してみたというお客様もいらっしゃいます。

しかしWEBデザイナーが作ったものと比べると、どことなく「コレジャナイ感」がでてしまったり、「パワポで作った資料感」がでてしまう場合が多かったりします。

WEBマーケターによると、たったそれだけで、その会社やサービスに対する信頼性を下げてしまう場合があるとのことです。

 

そこで今回は、少しの手間で自作のWEBサイトの信頼性をあげる4つのポイントをご紹介します。

これは、私がWEBデザイナーやWEBマーケターとサイト制作をする中で教えてもらって実践しているノウハウで、簡単にできるわりに効果が高くおすすめです。

4つのポイントとは、適切な目標設定をする、ベンチマークをパクる、小技を効かせる、コミュニティの力を借りる、の4つです。

 

また今回はWEBサイト制作サービス「STUDIO」を使って、具体的な制作のポイントも説明します。STUDIOであれば、簡単に利用でき、自由度が高いため、今回ご紹介するポイントをすべて実践することができます。

STUDIO以外のサービスを利用する場合にも使えるポイントもありますし、WordPressを利用する場合やご自身でプログラムを書く際にも参考になると思いますので、ぜひ試してみください。

 

制作メンバーの能力を考慮して、適切な目標設定をする

サイト制作に取り掛かる前に、制作に参加できるメンバーの能力や経験を確認して、適切な目標設定をすることが大事です。ご自身やメンバーの能力によって、取り組み方や制作できるサイトの種類も変わってきます。

自社でWEBサイトを作ることに挫折する理由の多くは、メンバーの経験・能力に合わない目標を定めてしまうことです。

 

まずメンバーに、デザイナーがいる場合は、プログラマーがいなくてもSTUDIOのようなサービスを使えばWEBサイト制作ができます。

STUDIOはイラストレーターやSketch、Figmaなど、デザイナーが使うデザインツールに操作性が近いため、さまざまなバリエーションのWEBサイトを短期間で作れる可能性があります。

 

またデザイナーではないエンジニアがメンバーにいる場合も、STUDIOであれば導入や制作はスムーズにできます。

HTMLとCSSの基礎が理解できていれば、STUDIOは存分に威力を発揮します。

私もデザイン経験のないエンジニアですが、自力では実現できないようなWEBサイトの制作が簡単にできています。

 

もしデザイナーやエンジニアが周りにいないという方も、ご安心ください!STUDIOで用意されているテンプレートを使い、今回ご紹介するポイントを実践いただければ、信頼性の高いWEBサイトは十分に制作できます。

ただし、このような状況で、この世にないオリジナルなアイデアを盛り込んだサイトを作るという目標を立てることはおすすめできません

次の章でご紹介するように、一からオリジナルのサイトを作り出すよりも、簡単で効果的な方法があります。

ベンチマークを参考に、大枠を作る

2つ目のポイントはベンチマークになるサイト、いわゆるパクるサイトを探すことです。

いいWEBサイトは、1枚ペラでもストーリーがあるといいます。しかし広告代理店で働いていた方でもない限り、ストーリーから考えてWEBサイトを制作した経験はほとんどないと思います。

そして、あれもこれもと、いろいろ詰め込もうとして、怪しい情報商材のWEBサイトのようになってしまったりします。(私も気がつくとそうなっていました)

 

信頼性の高いサイトを制作する一番の近道は、ベンチマークとなるいいサイトを見つけて(または教えてもらって)、それをパクることです。

 

たとえば先日WEBマーケターから、おすすめしてもらったサイトは、「退職代行EXIT」のサービスサイトです。

https://www.taishokudaikou.com/

コミカルなイラストやアニメーションに目が奪われがちですが、サイトの構成を確認すると、実際は下記のようにとてもシンプルです。

 

・サービスの内容を一言で表すキャッチコピー
・こんなお悩みある方のためのサービスです
・このサービスが選ばれる3つの理由
・ご利用までの3ステップ
・ご利用料金
・ご利用事例
・よくある質問
・お問い合わせ

 

ほかのサイトもおすすめしてもらいましたが、ほとんどすべて同じ構成になっていました。知りたい情報が分かりやすい流れで提示されており、上から下に読んでいくだけで頭に入ってきます。

 

サイト制作に入る前に、ベンチマークサイトを1画面ずつスクリーションをとり、パワーポイントやGogoleスライドに貼り付けて、その上からご自身のサービスや事業の内容を記載してみてください。

掲載するべき内容、どのような見出しにするか、説明テキストの分量など、サイト全体のイメージが湧くと思います。

ベンチマークのスクリーンショットの上に自分のサービスの内容を書く

ベンチマークのスクリーンショットの上に自分のサービスの内容を書く

 

小技を効かせて、それっぽいサイトにする

大枠が決まったところで、次のポイントは小技を効かせることです。ここでは簡単に実践できてサイトがそれっぽくなる小技をご紹介します。

ベンチマークを参考に作れば、大枠がずれることはほとんどありません。またサイト制作サービスに用意されているテンプレートを使えばある程度の完成度のサイトになります。

 

しかし小さいところをはずしてしまうと、途端に「コレジャナイ」感、「パワポ」感がでてしまい、サイトの信頼性が、グッと下がります。

 

それではSTUDIOの登録をして、ベンチマークと近いテンプレートを選択して、制作を開始してみましょう。

サインインページにアクセスして、「ユーザー名とメールアドレス、パスワードを入力する」または「Facebookで登録する」だけで登録完了です。

STUDIO新規登録

 

次に、お好きなテンプレートを選択して制作を開始しましょう。

 

 

それでは今回は数ある小技の中から、簡単にできて効果の高い3つをご紹介します。

 

① 文字間、行間を設定する

簡単にできて効果的なのが、文字と文字の間である「文字間」と、一行の高さである「行高」を設定することです。

これが設定されていないだけで、一気に「パワポ資料感」が出ます。

 

文字感行高調整前

文字間、行高調整前。パワポ感あり

文字間、行高調整後

文字間、行高調整後

 

STUDIOなら文字間、行間の調整が簡単にできます。見出しやテキスト部分を選択して、上部にある「文字感」「行高」を設定しまししょう。

見出しは文字間が0.1、行高が1.4。テキストは文字間0.1で行高を1.6がおすすめです。

 

STUDIOでの文字間調整

② 色の種類を3色までにする

背景や文字に使う色の種類は、3色までにしてみましょう。

ご紹介した退職代行EXITのサイトをみると緑、黄色、黒の3色と、濃淡を変えたものだけで、とてもシンプルです。

目立たせようという目的で、色の種類を増やせば増やすほど、パワポ感が増していきます。

緑、黄色、黒の3色のみ

緑、黄色、黒の3色のみ

 

色の種類を選ぶときも、ベンチマークを見つけて参考にします。構成を参考にしたベンチマークと別のサイトの物を使うといいと思います。

または知り合いのWEBデザイナーに依頼して、3色だけ選んでもらったりもします。

 

STUDIOでは、カラーパレットに色を保存していろいろ箇所で利用することができるので、3色のみ保存して、それ以外使わないと決めて制作を進めてみましょう。

カラーパレットとグラデーション

③ SNSでシェアするための設定をする

意外と見落とされがちですが、カバー画像、タイトル、ディスクリプションの設定も、簡単にできて大事なポイントです。

特に制作したばかりのWEBサイトは、Googleなどの検索エンジンで検索されるようになるまでには時間がかかります。はじめはTwitter、Facebook、LINEなど、SNSを使ってシェアするなどして、宣伝することがほとんどではないでしょうか。

SNSに投稿してから、設定してなかったー!ということにならないようにしましょう。

 

何も設定されていないこうなります。

何も設定されていないこうなります。

ちゃんと設定されていると、目に止まります

ちゃんと設定されていると、目に止まります

 

STUDIOならページごとに、簡単に設定ができます。

SEO対策の設定方法

 

自分たちだけでやらずに、人の力を借りる

とくにSTUDIOのようなサイト制作サービスを利用する場合、ユーザーグループやコミュニティの力を借りることを強く、おすすめします。

 

STUDIOが優れていると思う点は、自由に参加できるSlackのコミュニティが存在していてSTUDIOのスタッフに直接質問ができることです。

有名なサイト制作サービスは海外の会社が運営していることも多いですが、STUDIOは日本の会社が運営しており、日本語でやりとりができるのもポイントです。

 

サービスの使い方や、サービスに関連のないWEBサイト全般に関する質問にもスタッフや参加ユーザーが答えてくれます。
私も制作時につまづいたことのほとんどは、既にコミュニティ内で質問されていて、Slackを検索するだけで解決することが多いです。

STUDIOで作ったサイトも数多く紹介されていて、ベンチマークするサイトを見つけるのにも重宝しています。

 

知らない人ばかりのコミュニティに参加するのは緊張するかも知れませんが、「聞くは一瞬の恥、聞かぬは一生の恥」とも言います。

もし何か失敗したなと思ったら、アカウントを作り直して、何食わぬ顔でログインすれば良いのです。

まとめ

ここまで自作のWEBサイトの信頼性を上げるポイントを解説してきましたが、役に立ったでしょうか?

 

最近は市場の変化が早く、時間をかけてクオリティの高いWEBサイトを作り上げるよりも、短期間で制作して公開し、柔軟に変更を加えていくことが求められるようになりました。

今回ご紹介したようなノウハウを活用して、だれでもサイト制作ができるようになることで、スピーディーな事業展開を後押ししてくれることでしょう。

 

ある企業では、デザイナーやエンジニアがメンバーにいるにもかかわらず、クライアントワークや新規開発に忙しく、サービスサイトの制作にとりかかれないためプロジェクトが進まないことがありました。

このときは、今回ご紹介したノウハウを営業の方にお伝えしてサイト制作をしていただいたことで、半年近く停滞していたサイト制作が、2週間で完了しました。

 

WEBサイト制作にかかわらず、ちょっとのコツや最新のサービスの利用方法を知っているだけで、短期間でコストを抑えて完成度の高いものや仕組みを作り上げることが可能な場合があります。

 

私が担当しているお客様企業の中では、業務の効率化やコスト削減、導入したが使いこなせていないサービスの再利用などに関して、社外の専門家が参加することで、意外と簡単な方法で解決したという事例も多くあります。

ギルドプロジェクトでは、現場で使用しているツールに代替するSaaSの導入、決裁者への意思決定の手助けなどの業務効率化を代行する「カワリニ」というサービス展開しております。

 

問い合わせは何回でも無料で対応させていただいております。社内SEを雇うと月額のコストが多くかかってくるが、リモートの形で安価に外注したかった等ありましたら、お気軽にご相談ください。

カワリニに相談する