ホームページ制作

ホームページはもはや 「あればいい」 のステータスではありません。
ホームページは会社の顔であり、世界と繋がっている情報発信ツールとなっています。
テレビや新聞、ラジオとインターネット(パソコン・モバイル・スマートフォン・タブレットなど)を同時に使用する「~ながら生活」が浸透し、気になった情報は消費生活者の方から能動的に検索してくれるため、CMのような瞬間的な情報や情報量の限られた紙媒体からでも点が線につながりやすく、広告キャンペーンに及ぼす影響が大きくなっています。
また、広告宣伝費という観点で見ると、インターネット広告費が新聞、ラジオ、雑誌広告費を抜くに至っており、引き続き大幅な伸びを見せています。これなどは企業のインターネット重視の現れで、今後も成長が見込まれる分野です。
つまり、それらの受け皿となるホームページは、消費生活者に向けた重要な情報発信源となり、今後、ますます重要度を増して行きます。
これらの現状を踏まえて、札幌のセカンドエイトでは既存媒体とホームページ、ソーシャルメディアを一体として捉えて、トータルプロデュースすることがホームページの効果を最大限に発揮する上で必要不可欠であると考え、媒体とホームページに関するプランニングから制作までを、社内一貫体制で対応できる会社です。

トップページをFLASH(フラッシュ)で制作したホームページ

札幌のセカンドエイトが制作したホームページの中で、TOPのメイン画像部分をFLASHで制作したホームページです。当社では、多数のFLASH制作実績がございますので、 ホームページのFLASH制作をご検討される方は、是非、ご覧下さい。

協栄ネジ 株式会社 様

  • サンプルイメージ01
  • サンプルイメージ02
  • サンプルイメージ03
制作概要
サイト公開日 2011年11月
Webサイト制作目的 ホームページの新規制作
当社の対応範囲 ディレクション、デザイン
コーディング、保守・運営管理
Webサイトのページ数 8P(納品時)
サイトコンセプト 北海道内及び札幌を中心にボルト・ナットなどのネジ類、さらにオリジナルの製作ねじ・製作金物を取扱っている会社のホームページです。
商品写真は、お客様のスタッフが撮影し、非常に綺麗な商品写真ですのでご覧下さい。
http://www.kyoei-neji.net/

岩見沢自動車学校 様

  • サンプルイメージ01
  • サンプルイメージ02
  • サンプルイメージ03
制作概要
サイト公開日 2011年10月
Webサイト制作目的 ホームページのフルリニューアル
当社の対応範囲 ディレクション、デザイン
コーディング、保守・運営管理
Webサイトのページ数 11P(納品時)
サイトコンセプト 札幌の近郊、岩見沢市内にある自動車学校のホームページです。
運転免許の取得から各種講習まで行なっています。セカンドページは縦に長いので、スクロールすると同時に移動するメニューバー機能を採用しています。
http://www.iwamizawa-ds.co.jp/

パソコン・モバイル・スマートフォン(TOPページ)サイトの制作事例

パソコン・モバイル・スマートフォン3つのサイトをご活用されているサイトです。
お客様とのコンタクトポイント、そこからの集客を逃さないためにも、今後、この3つのツールは基本となってくると思われます。札幌のセカンドエイトは、パソコンモバイルスマートフォンから、既存媒体(テレビ・ラジオ・チラシ・DM)の活用までのトータルサポート支援体制が整っています。

廃車・事故車買取 リサイくるまッチ 様

  • サンプルイメージ01
  • サンプルイメージ02
  • サンプルイメージ03
制作概要
サイト公開日 2006年02月
Webサイト制作目的 ホームページの新規サイト制作
当社の対応範囲 ディレクション、デザイン
コーディング、保守・運営管理
Webサイトのページ数 987P
サイトコンセプト 「廃車にしたい」「廃車を売りたい」というお客様が、メールで簡単に見積依頼できるホームページです。
http://www.r-kurumacchi.com/

リサイくるまッチ 様(モバイル)

  • サンプルイメージ01
  • サンプルイメージ02
  • サンプルイメージ03
制作概要
サイト公開日 2007年03月
Webサイト制作目的 モバイルサイトの新規制作
当社の対応範囲 ディレクション、デザイン
コーディング、保守・運営管理
Webサイトのページ数 103P(納品時)
サイトコンセプト 北海道や札幌などエリア別に廃車買取の店舗が検索できるようになっています。
トップページはキャンペーン情報のみの掲載で、見やすくてシンプルなデザインです。

リサイくるまッチ 様(スマートフォン)

制作概要
サイト公開日 2011年11月
Webサイト制作目的 スマートフォンサイトの新規制作
当社の対応範囲 ディレクション、デザイン
コーディング、保守・運営管理
Webサイトのページ数 1P(納品時)
サイトコンセプト 廃車・事故車の買取、中古パーツ見積のホームページです。
見積依頼ボタンを大きめにすることで、アイキャッチを重視したデザインになっています。
定期的に開催されるキャンペーン情報は、タイトルの近くにレイアウトしています。

マンガコンテンツを使った事業紹介のページ

ホームページで自社の事業や商品、リクルート案内をマンガで紹介ことによって、事業内容を簡単にご理解して頂くなど、マンガページは様々な効果を発揮できるコンテンツツールです。

(有)オートワタナベ商会 様

  • サンプルイメージ01
  • サンプルイメージ02
  • サンプルイメージ03
制作概要
サイト公開日 2011年04月
Webサイト制作目的 ホームページの新規制作
当社の対応範囲 ディレクション、デザイン
コーディング、保守・運営管理
Webサイトのページ数 7P(納品時)
主な機能 マンガでコンテンツの紹介
トップページをFLASHで制作
サイトコンセプト 札幌を中心に軽自動車・普通自動車をはじめ、ユニック車・ダンプカー・ミキサー車など特殊車輌の買取も積極的に行なっています。
マンガで廃車の買取を紹介している札幌のホームページです。
http://www.auto-watanabe.jp/manga/

上記の他にも多数の制作実績がございますので、詳しくはホームページ制作実績ページでご覧下さい。

レスポンシブWebデザイン

現在のWeb制作現場(2012年6月時点)では、パソコンやスマートフォン、タブレットなど、異なるデバイス毎に各HTMLファイルを複数用意し最適化することが、一般的な制作方法となっています。

レスポンシブWebデザイン(Responsive Web Design)制作は、一つのHTMLファイルを、CSS3のメディアクエリー(Media Queries)で制御し、スマートフォンやタブレット、ノートPC、デスクトップPCなど、複数の異なる画面サイズをWebサイト表示の判断基準にして、ページのレイアウトやデザインを柔軟に調整して、各デバイスごとに最適な形で表示する手法です。
レスポンシブWebデザイン(Responsive Web Design)に使用される、CSS3の メディアクエリー(Media Queries)は、一つのHTMLファイルをワンソースでマルチデバイス対応させる振り分け方法を容易に実装するための機能となっています。
上記のレスポンシブWebデザイン(Responsive Web Design)は、2012年6月、Google が検索エンジンのクロールにおけるメリットからこの手法を公式に推奨、また、同じ6月にCSS3の メディアクエリー(Media Queries )が W3C 勧告となりました。これによってWebサイト制作のマルチデバイス対応手法として大きな選択肢のひとつとなりました。

当社でCSS3のMedia Queriesを使用して制作したサンプルサイトの事例です。

レスポンシブWebデザインと通常のWebサイト制作について

レスポンシブWebデザインの制作は、各デバイスによってデザインレイアウトが変わるため、デザイン・実装・サイトの検証を同時に行う必要があります。パソコン環境では、動作する要素が、スマートフォンやタブレットなどのデバイスでは動作しない場合があることなど、実際に検証してみないと確認できない要素が多くあります。
また、各デバイスにつきものの回線速度なども考慮する必要がありますので、早い段階で初期のプランニングとデザイン設計に無理がないか確認する必要があります。

制作ワークフロー

通常のWebサイトとレスポンシブWebデザインでのWebサイト制作ワークフローの業務フロー図

レスポンシブWebデザインのメリットとデメリット

制作のメリット

  1. 1つのHTMLファイルで複数デバイスに対応できるので、
    制作・公開した後は、月次更新などのメンテナンスが容易になります。
  2. 全てのデバイスの情報が同一の為、各デバイスによる設計がバラバラにならず、
    情報管理が行いやすくなります。
  3. パソコンとスマートフォンなど異なったデザインとして考えず、
    決められたデザインで制作が可能になります。

制作のデメリット

  1. スマートフォンとパソコンでは、利用シーンが異なるため、
    デザインされる画像の取り扱いに注意をする必要があります。
  2. 制作・公開した後のメンテナンスの作業軽減になりますが、
    多くのデバイスに対応させるため、制作の初期段階は情報設計やデザイン、
    実装とテストを慎重に行う必要があります。
  3. パソコンとスマートフォンを異なるデザインにした場合、1つのHTMLファイルを
    使用するため、ページの読み込み速度に時間がかかる可能性があります。
スマートフォン・タブレット・パソコンに適したレスポンシブWebデザイン制作の料金はこちらをご覧ください。

WordPressを利用した制作

通常公開されている無料ブログには、様々な制限がありますので、事前に容量の制限、デザインやレイアウトの制限、Java Script(ジャバスクリプト)やjQuery(ジェイクエリー)などの機能の制限について、確認する必要があります。WordPress(ワードプレス)は、ブログ感覚でホームページの更新ができるオープンソースのソフトウェアですが、PHPで開発されており、データベース管理システムとして、MySQLを利用しています。
つまり、WordPress(ワードプレス)は、単なるブログサイトではなく、会社のオフィシャルサイトの制作と公開、フラッシュや写真などをクオリティーの高いデザインで公開することも可能にするオープンソースのソフトウェアです。CMS(Content Management System)の役割としても利用され、様々な機能をプラグインとして追加することができ、サードパーティからも多くのプラグインが開発されており、プラグインはPHPで開発することができるオープンソースのソフトウェアです。

当社でWord Pressを使用して制作したサンプルサイトの事例です。

施工事例の自動更新
施工事例の自動更新
施工事例の自動更新

Word Pressの具体的なホームページ制作

ホームページのコンセプトとテーマをサイト制作にあたり、XAMPP(ザンプ)、若しくはレンタルサーバー上にWordPress (ワードプレス)をインストールしますので、事前にサーバーの環境を確認します。そして、制作の担当者が今後制作していく、テーマ作成用のフォルダを作成します。今後はこの中に、制作の担当者が作りたいデザインタグなどを記載して行きます。大まかなラフデザインを制作して、ブラウザ上で確認します。

制作ワークフロー

通常のWebサイトとWordPressを利用した制作ワークフローの業務フロー図

WordPressの制作、メリットとデメリット

制作のメリット

  1. Wordpress(ワードプレス)は、ブログ形式でホームページを作成できるツールです。
    ブログ形式のツールは、難しい操作方法をほとんど覚えることなく、簡単に文字の入力と写真の貼り付け、ページの作成や更新を行うことができます。
  2. Wordpress(ワードプレス)は、プラグインの数が多く豊富なので、素人には作成が難しいプログラミングも、プラグインを使えば取り入れることが可能です。
    また、プログラミングをある程度知っている方であれば、デザインレイアウト変更してサイトをカスタマイズすることができます。
  3. Wordpress(ワードプレス)は、プラグインの数が多く豊富なので、素人には作成が難しいプログラミングも、プラグインを使えば取り入れることが可能です。
    また、プログラミングをある程度知っている方であれば、デザインレイアウト変更してサイトをカスタマイズすることができます。

制作のデメリット

  1. オフラインでファイル編集ができるHTMLサイトと異なり、WordPress(ワードプレス)は絶対的に安定したオンラインの環境が必要ですので、サーバーやインターネットの環境に左右されます。
  2. マニュアルは英語が中心になっています。日本のWordPress(ワードプレス)ユーザーの増加に伴い、プラグインやデザインについて、日本語での情報提供も増えてきましたが、まだまだ少ない現状となっています。
  3. 最低限のHTMLとCSSの知識がなければ、普通のブログのようになってしまうので、企業用のホームページとして公開する場合は、基礎的な知識が必要になります。
    HTMLとCSSが全くわからない場合は、かなり敷居が高いツールとなりますので、初心者向けのオープンソースソフトウェアではないと言えます。
ブログ感覚で更新ができるWord Press制作の料金はこちらをご覧ください。
事業内容

PAGE TOP