webサイト構築

インターネットで
情報を発信する時代にしっかりと対応

20

Years

OF EXPERIENCE

Welcome!

SECRET OF SUCCESS

OF OUR PROJECTS

新潟のマックエージェンシーは（2000年設立）に設立され、販売促進・広告・web制作などを手掛けてまいりました。
こちらのサイトでは、webに特化して様々な情報を提供して皆様にお役立て頂きたいと思います。

1st

インフラ整備

Preparation stage

1.レンタルサーバーの準備

準備は大切ですよね。

Let's apply

Hosting Company

rental server

インフラの準備をしていきましょう。
webサイト・ホームページを開設するためには、webデータをインターネット網で閲覧していくために、インターネット網のどこかにあるサーバ（コンピュータ）の中にwebデータをおいておく必要があります。
大きな企業以外はサーバーを安価でレンタルしているのが現状です。
このレンタルサーバを提供してくれているのがホスティング会社さんです。代表的な会社さんで言うと、Xserverさん、さくらインターネットさん、ロリポップさんといったところでしょう。
サービスや価格帯やスペックを総合的に判断して選ぶと良いでしょう。

①レンタルサーバーを申し込みましょう

当方ではレンタルサーバーのお申し込みの代行を承っています。
実費のお支払いは直接お願いしています。（コンビニ払いなど）

1st

インフラ整備

Preparation stage

2.オリジナルドメインの取得

準備は大切ですよね。

Let's get a web Address

Original Domain

インフラの準備でさらに必要なものに、ドメインがあります。しかもオリジナルドメインというものです。

htpp://website.comといったものがそれです。これがサーバーに置かれているwebページデータの住所に当たります。http://company-name.comというように独自な名称のドメインをオリジナルドメインというのです。

末尾の.comは特に制限はありませんが、.co.jpは日本の一般法人でないと申し込むことはできません。医療法人であれば.or.jp。学校法人であれば.ac.jpとなりまして企業体や団体の種類によって変わりますし、取得・維持のための料金も変わってきます。

ですから予めオリジナルドメインについては、想定の文字列で取得可能かなどを調べておくことをおすすめします。

②オリジナルドメインを取得する

当方ではレンタルサーバーとともに取得代行を承っています。
実費のお支払いは直接お願いしています。（コンビニ払いなど）

2nd

デザイン準備

Design preparation

3.ホームページの種類を決めよう

さあ、ホームページの構想を考えよう

What kind of web page do you make?

Static page or Dynamic page

いよいよwebページのことを考えていきましょう。

webページのスタイルや構造から大きく2種類のwebページがあります。
それは「静的ページ」と「動的ページ」です。

静的ページはhtmlやCSSといった言語で作られているオーソドックスなwebページを指します。

動的ページは静的ページに加えてデータベースと連携してwebサイトを構成しています。ブログやお知らせ情報など、情報を管理して発信するには便利なのが動的ページでその代表的なものがWordPressになります。（CMSコンテンツマネジメントシステム）

③静的ページか動的ページにするかを決めましょう。

当方では動的・静的ページ制作に対応しております。
どのようなwebページを作るべきかなどお気軽にご相談ください。

2nd

デザイン準備

Design preparation

4.webサイトの全体像を考えよう

さあ、webサイトの全体像を想像してみましょう

Let's show the whole picture with a site map

It is important to see the forest

webサイトを構築し、webページを作っていくためには、まずwebサイトで何を果たしたいのかという目的を再確認することが大切です。

どのような情報を提供し、どのような行動を期待したいのかなど、一連のシナリオを考えてみましょう。

それをサイトマップとして具体的にしていくことでwebサイトも全体像が固まってきます。

④サイトマップを作ってみよう

サイトマップを描くことで目的を達成するために何が不足しているのかなど確認できたり新しい発想に気づいたりできます。
どのようなwebページを作るべきかなどお気軽にご相談ください。

ここまでのまとめ

1.レンタルサーバー

ホームページを作るにはインターネットで閲覧できるようにしなくてはなればなりません。そのためにインターネット網にホームページ（データ）を置く必要があるんです。どの置く場所がサーバーなんです。

2.オリジナルドメイン

ホームページを置く場所が決まれば住所が必要ですね。それが（オリジナル）ドメインです。

3.動的・静的ページ

動的なホームページにしたいのか静的ホームページにするかを決めましょう。

4.サイトマップ

サイトマップを考えましょう。難しく考えることはないです。どんなページが必要なのかを描いてみましょう。

やっぱり全体構想がしっかりしないと

構想

デザイン

コーディング

％

3rd

デザイン

Design

5.ホームページをラフデザインしよう。

さあ、webページをデザインしましょう

Let's solidify Contents from wire design

Don't forget Contents

具体的なwebデザインを考えるときに、単に「かっこよく」とか「おしゃれに」といったデザインのディテールではなく、情報コンテンツの見落としがないとかを確認してから、具体的なデザインへ移りましょう。

これはいろいろな確認としても役立つ作業です。

⑤ワイヤーデザインでザックリとデザインの下書きでContentsの確認

ワイヤーデザインを作ることによって様々な気付きや発想があったりします。
きれいに作る必要はありません。手書きでも、メモ書きでも構いませんから本格的なデザインに入る前に作っておきましょう。

3rd

デザイン

Design

6.ホームページをデザインする。

さあ、具体的なwebページのデザインです

It is important to have a design that is compatible with PCs, tablets, and smartphones.

It's a responsive design

ワイヤーデザインをベースとして具体的なwebデザインへと進みます。ページ全体のメインカラー、サブカラーや見出し単位のフォントなどの基本設定して、UIやディテールデザインしてまいります。

デザインの配慮として、PC、タブレット、スマホに対応したレスポンシブデザインであることです。webページの閲覧でスマホの占める割合が非常に多いのが現状なのです。

⑥レスポンシブデザインを意識したデザインで素敵なwebページを！

Adobe社のXDやIllustratorなどのグラフィックデザインソフトウェアでデザインを作ることが一般的ですが、当方ではダイレクトデザイン・コーディングで構築する場合もございます。

4th

コーディング

coding

7.ホームページをコーディングする。

デザインをコーディングしてweb上で実現しよう

Realize the design by coding

Bring real life to your design

デザインを実際の形にしていきましょう。　見た目のデザイン装飾だけでなく、スクロールやクリックなどに対する動き・挙動、データベースとの連携などが、この「コーディング作業」です。

当方ではWordPressでのwebサイト構築を推奨しております。ノーコードビルダーであるelementorを駆使して、お客様ニーズを実現する素敵なwebページをお作りしています。

⑦ノーコードビルダーのelementorで素敵なwebサイトを構築します

webページの静的装飾に対してきめ細かな設定も可能ですが、動的なダイナミックページの取り扱いにも柔軟に対応しております。また、ノーコードビルダーelementorは更新・微修正などが容易なのでお客様自身で更新がやりやすいのが喜ばれています。

WordPressの良さを十二分に生かしてより良いwebサイトを作りましょう。

5th

SEO

Search engine optimization

8.SEO対策を施す

サーチエンジンとの親和性

Get along with search engines

Providing valuable information to users

いよいよ最後の作業ですね。それがSEO対策です。

当方ではWordPressにおいてSEOプラグインRank Math（ランクマス）を採用しています。グーグルサーチコンソールとの連携と全般的設定に取り組めるSEO対策です。

コンテンツ見出しやキーワードに沿った内容など、検索エンジンとの親和性を保っていきます。

ユーザーにとって有用な情報を提供することがSEOにとってとても重要なことです。

⑧内部SEO対策と情報コンテンツが重要です

しっかり情報発信、しっかり情報整理で検索エンジンにもわかりやすいwebページ作っていきます。それがSEOなのです。

最終的にグーグルに対してindexをリクエストして検索に現れるようにします。

ここまでのまとめ

5.ワイヤーデザイン

ワイヤーデザインでザックリとした内容で、コンテンツの漏れがないように確認します。そしてきれいにデザインしていくのです。

6.グラフィックデザイン

ワイヤーデザインをきれいにデザインしていくのです。ここでは見た目で完成度を高めたデザインになるわけです。

7.コーディング作業

見た目のデザインをweb上で再現します。ノーコードビルダーだから直感的かつ手直しが容易なので、後々の更新も比較的楽です。

8.SEO

検索エンジンにもしっかりと理解してもらって、検索表示をしてもらわないといけません。内部対策だけでなく、コンテンツのマネジメントでドメインパワーを強くしていきます。

ホームページの活用

現在ではインターネットの光回線の普及に伴い、ホームページでの様々な情報発信が容易になっております。高速回線を利用した動画公開やフラッシュコンテンツの表示など、動的コンテンツを公開することが当たり前となってきております。まさに良い環境が整っている現在といえるでしょう。企業活動における情報発信にwebページを活用することの重要性は言うに及びませんが、それらが一連の意図に基づいて発信されているかによって大きな違いが出て参ります。弊社ではその意図や目的に沿った情報発信をお手伝いする一つのツールとしてホームページのご提案をしております。

企業情報あるいは商品情報にしても、ホームページは情報発信の「顔」です。それらのイメージをつくる・維持するためにもホームページのデザインは大切であると考えております。弊社ではその目的や情報の内容などを吟味して最良のホームページデザインをご提案しております。

レスポンシブデザイン

パソコン

スマホ

タブレット

パソコンからスマートフォンまで、あらゆるデバイス（端末）で適切に見やすい表示を実現しています。
（当社の標準対応）

レスポンシブデザイン

パソコン

スマホ

タブレット

パソコンからスマートフォンまで、あらゆるデバイス（端末）で適切に見やすい表示を実現しています。
（当社の標準対応）

デザイン

設計・プラン

情報発信の大きな役割を果たすホームページですが、発信する立場とともに情報の受け手の立場に立ったホームページでなければなりません。ホームページをご覧になる方が「わかりやすい」「欲しい情報に到達しやすい」「次のアクションにつながりやすい」などを考えた「ユーザビリティ」のあるホームページをご提案しております。