20
Years
OF EXPERIENCE
Welcome!
SECRET OF SUCCESS
OF OUR PROJECTS
mac2008の山野は新潟のマックエージェンシー（2000年設立）に所属して、販売促進・広告・web制作などを手掛けてまいりました。
こちらのサイトでは、webに特化して様々な情報を提供して皆様にお役立て頂きたいと思います。
1st
インフラ整備
Preparation stage
準備は大切ですよね。
Let's apply
Hosting Company
rental server
インフラの準備をしていきましょう。
webサイト・ホームページを開設するためには、webデータをインターネット網で閲覧していくために、インターネット網のどこかにあるサーバ（コンピュータ）の中にwebデータをおいておく必要があります。
大きな企業以外はサーバーを安価でレンタルしているのが現状です。
このレンタルサーバを提供してくれているのがホスティング会社さんです。代表的な会社さんで言うと、Xserverさん、さくらインターネットさん、ロリポップさんといったところでしょう。
サービスや価格帯やスペックを総合的に判断して選ぶと良いでしょう。
①レンタルサーバーを申し込みましょう
当方ではレンタルサーバーのお申し込みの代行を承っています。
実費のお支払いは直接お願いしています。（コンビニ払いなど）
1st
インフラ整備
Preparation stage
準備は大切ですよね。
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
さあ、ホームページの構想を考えよう
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
さあ、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
さあ、webページをデザインしましょう
Let's solidify Contents from wire design
Don't forget Contents
具体的なwebデザインを考えるときに、単に「かっこよく」とか「おしゃれに」といったデザインのディテールではなく、情報コンテンツの見落としがないとかを確認してから、具体的なデザインへ移りましょう。
これはいろいろな確認としても役立つ作業です。
⑤ワイヤーデザインでザックリとデザインの下書きでContentsの確認
ワイヤーデザインを作ることによって様々な気付きや発想があったりします。
きれいに作る必要はありません。手書きでも、メモ書きでも構いませんから本格的なデザインに入る前に作っておきましょう。
3rd
デザイン
Design
さあ、具体的な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
デザインをコーディングして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
サーチエンジンとの親和性
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
検索エンジンにもしっかりと理解してもらって、検索表示をしてもらわないといけません。内部対策だけでなく、コンテンツのマネジメントでドメインパワーを強くしていきます。
what we do?
Our best
Projects
こんなデザイン
sample
design
テーマ Beauty
テーマカラーをパープルにした、高貴な感じのビューティーデザインです。
テーマ Sweets
ピンクを基調としたスイーツサイト。メニューをハンバーガーにしてヒーローエリアを広く見せています。
Gallery
© Copyright 2021, mac2008 All Rights Reserved