Office vAin

Web
Web制作

Webサイト構築・制作

使いやすく見栄えの良いサイトを色々な環境向けに構築致します

様々な環境に対応致します

2010年頃までは、インターネットを閲覧する環境は、パソコンが主流でした。しかし近年はスマートフォンの普及もあり、サイトにアクセスする半数以上がモバイルユーザーとなりました。そのため、様々な環境からアクセスされる事を想定し最適な表示をするサイトを構築致します。

相談の上ニーズにあったサイト

こちらが用意したサイトのテンプレートにお客様のサイトを押し込むのではなく、十分に打ち合わせを行い、お客様がお望みのサイトを構築致します。

Webサイトは一度制作すれば終わりというものではありません。情報を更新し続けるためにどのような方法でサイトを維持していくか等、運用面もサポート致します。

オーナーが更新可能な機能

ニュースの更新やサイトを訪れる方へのメッセージを、Webブラウザから投稿し表示する仕組みを構築致します。

例えば、店舗の開店日などをカレンダー表示しているようなサイトでも、臨時休業の告知をWebブラウザから簡単に設定できるようにして、お客様自身がサイトの小さな変更を行えるようサイトを構築することもできます。

撮影・画像処理

撮影方法や画像処理について

施設・設備・人物・商品の撮影

建物の外観や施設案内、使用している機材や商品等各種撮影を請け負います。

撮影は様々な機材を用いて、施設・設備・人物・商品等それぞれに適した形で撮影致します。

画像の修正処理

建物や機材・人物等撮影された素材を、Webサイトに合わせてレタッチ致します。

人物画像の修正は、肌の質感調整や染み、皺の軽減、顔の角度の調整等を行います。修正の方向性を入念に打ち合わせ、お客様にご満足いただける修正致します。

建物の補正は外観を整えるだけではありません。障害物が影響する等、立地条件の関係でどうしても適切な撮影ができない場合等でも補正で対応出来る場合もあります。ご相談下さい。

適切な修正

画像の補正を続けると、どんどん補正をしてしまい実像からかけ離れてしまう場合があります。補正する内容について、お客様の希望をお聞きした上で調整し補正致します。

サーバー設定

全ての設定を行い、お客様の手を煩わせません

最適なサーバーの選択

サーバーを維持する費用は、アクセス量やサーバーの性能によって大きく増減します。見込まれるアクセス数や使用したい機能を相談し、無駄のない最適なサーバーを選択します。

独自ドメインの設定

新しく自社サーバーを用意する場合は、お客様のドメイン取得し、サーバーを設定致します。また運用しているドメインがある場合は、そのドメインの設定と、必要であれば移管の手続きを代行致します。

導入後の運用相談

導入後の疑問等についても、真摯に対応致します。安心してお任せ下さい。

動作サンプル

Webサイト構築時は入念な打ち合わせを行い、どのようなサイトにするかを決定致します。しかし、どのようなサイトが構築できるかがわからないと、打ち合わせも自体も噛み合いません。
数種類のサンプルを以下に掲載します。サンプルは様々な見栄えのサイトを大規模・小規模向けに用意致しました。ここから選ぶわけではなく、自社のサイトを制作するイメージ作りの参考資料としてご活用下さい。

飲食店向け

飲食店向けのサンプルです。これらのサイトは飲食店のメニューのように、インターネット上でお店を紹介する事を目的とするイメージで制作しております。

食堂・BAR

大きな画像と大きな動き

海外のサイトで見かける事が多い、大きい画像と大きい動きのページとなっております。また、レスポンシブデザインとなっており、パソコンで閲覧する場合と、スマートフォン等で閲覧する場合に違和感がなくページを受け入れられるよう構成しております。

印象に残る演出

動きのあるページで、写真も多用しております。

見栄えは美しいのですが、写真などのコンテンツが十分にあることが前提のデザインとなっており、次のサンプルである珈琲店のデザインと比較すると、載せるべき情報が多いお店向きのデザインと言えます。

珈琲豆販売店

レスポンシブデザイン

スマートフォンとパソコンで統一したデザインで閲覧環境が変わっても違和感はありません。

見栄え重視の構成

少ない情報で、見栄え重視のページ構成です。このページはオンラインのカタログとして使用し、詳細な情報はブログやSNS等別のシステムで情報提供する事を想定しております。そのような構成で構築することにより、ページの鮮度を保ち、サイトを訪れる方にも楽しんでいただけるサイトを目指します。

CSSによるデザイン

デザインはCSSによって管理されます。そのため色を変更や画面幅を調整を行う事も簡単に対応でき、お客様のイメージを忠実に再現致します。また閲覧する画面の大きさによってメニューと本文の幅を変えることなども可能であらゆる閲覧環境に優しいサイトが構築できます。

会社向け

会社の紹介などをイメージしたサンプルです。ニュースリリースや会社概要等、ある程度のページ数が必要なサイトを想定してレイアウトを用意致しました。

中規模の会社向けサイト

スタンダードな構成

スマートフォンとパソコンで統一したデザインがされており、閲覧する方はパソコンで見ても、スマートフォンで見ても違和感を覚えないデザインとなっております。またメニューは、国や地方自治体のサイトでよく見られるようなデザインで、幅広い世代に受け入れられやすいものとなっております。

大規模なサイトまで想定したデザイン

サンプルでは中規模な会社を想定し、メニューも階層化せずわかりやすく構成しましたが、メニューを増やして階層化することも可能です。階層化を行えば、同じデザインでそのまま大規模な会社にも対応可能となっております。

画像を使わないメニュー

メニューは全てCSSで構成し、画像は使用しておりません。簡単に色を変更することができるので、会社や部署のイメージに合わせてメニュー色を変えるような演出も可能です。

小さな工場

下部固定メニュー

メニューを常時下に表示しており、ページ移動が判りやすく作られております。そのため、ページを訪れた人が迷わないデザインになっております。

小規模から大規模なサイトまで対応可能。

基本的には1枚のページとしてデザインされております。特別に説明したい項目がある場合、別ページで説明するという構成となっております。非常にシンプルなページ構成と言えます。

このような作りは、多くのコンテンツを用意するのが難しい小さな会社などに適したデザインです。勿論、メニューは階層化して拡張することも可能ですので、コンテンツが増えてきたらそのままページを増やしていくことも可能です。大きい会社でもメニューを階層化することでこのデザインのまま対応することも可能です。

小さい空調会社

上部メニューと横メニュー

こちらは、メニュー以外は全く内容が同じである、2サイトのサンプルとなります。メニューを上側に表示するサイトと、左側に表示するサイトを用意しており、比較すると、内容は同じでも印象が大きく変わることがわかります。

メニューは階層化することができ、小規模から大規模なサイトまで対応可能となっています。

レスポンシブデザイン

パソコン、スマートフォン等で最適な表示が行われるレスポンシブデザインとなっております。スマートフォン等で閲覧する際はメニューが折りたたまれ、コンテンツの表示部分を確保する仕組みとなっております。。

デザイン会社

シンプルなデザイン

デザイン会社のサンプルとして、シンプルなサイトを制作致しました。Webサイトに掲載される情報も最小限に抑え、シンプルであることが、デザインである……という主張をもった会社のイメージでサンプルを制作しております。本サンプルを実際の会社で使う場合は、基本的な更新はメニューに組み込んだ外部blogを参照し、お客様自身が更新していく運用を想定しております。

デザイン会社ですので、請け負った仕事の結果をWebに乗せるのはなかなか難しいと思われます。しかし会社が継続していくなかで、そのような実績のデータが集まってきた場合はWorksページを増強し対応する事になります。

レスポンシブデザイン

パソコン、スマートフォン等で最適な表示が行われるレスポンシブデザインとなっております。パソコンで見るページとスマートフォンで見るデザインは異なるのですが、同じ会社のであるということを感じ取れるレイアウトを意識して制作致しました。

カフェ向け

カフェ向けのサンプルです。通常の飲食店と比べて、カフェは従業員とお客様の距離が近い店が多いため、柔らかいデザインと交流できるポイントを増やすイメージをで制作しました。SNSを活用したり、ブログを更新して頻繁にページに来ていただくことを想定しております。

街のカフェ

丸みのあるデザイン

こちらのカフェは、他の飲食店と比較して、丸みを出した構成となっております。お食事メニューのページでは様々なバリエーションでサンプルを用意致しました。

お食事メニューのページをこのようにいろいろな大きさの写真を組み合わせて構成することが可能ですので、メニュー数に応じて色々な表示ページを構築致します。

外部サービスを有効に活用

サイトを構築する際は、お店の案内や基本メニューの作り込みを行います。しかし臨時ニュースや短期間の特別メニューの為に、毎回ページ制作を依頼していただくのは、その都度制作費がかかってしまい費用も非常に嵩みます。

そのため外部ブログサービスや、ミニブログ(twitter等)をサイトに組み込み、日々の更新と全体の更新を分けて運用することで効率の良い運用を想定しております。他の業種に比べてお客様とお店の距離が近くなるため、外部サービスを有効活用しお客様とのコミュニケーションを取りやすいサイトにするのが良いと考えます。

郊外のカフェ

すっきりとしたデザイン

こちらは前のサンプルのカフェと異なり、すっきりしたデザインでまとめました。自然の中のカフェをイメージしており、トップ画像等ではカフェの外観や周りの風景の写真を取り込み表示する想定で制作致しました。

動きのあるメニュー

メニューの画像は動きがあるように作成され、スッキリしたうえで格好良く楽しい雰囲気で仕上がっております。対象年齢が少し高い大人のカフェを意識してデザイン致しました。

生活・健康関係向け

生活や健康に関わる会社向けのサンプルです。スポーツジムやマッサージ店などをイメージしております。これらのお店はお客様との対話が大切になるため、親しみやすいレイアウトを心がけて制作致します。

スポーツジム

丸みのあるデザイン

インターネットのWebサイトは直線的デザインが多く見られますが、それらとは異なる丸みのあるデザインです。今回はフィットネスクラブ向けのサンプルを制作しておりますが、デザイン自体は学校や塾などにも利用可能です。

こちらのサンプルもレスポンシブデザインとなっており、多くのデバイスに対して自動的に調整してサイトを表示致します。

大規模なサイトにも対応可能

このサンプルは、1ページで大量な情報を詰め込んだ形となっておりますが、全てそのように構築しなければならないわけではありません。例えば、ジムのトレーニングコース毎に紹介するページを制作する、病院で科毎にページを制作する……というような要求があった場合も対応可能なページ構成となっております。

色変更サンプル

上のサンプルサイトから、トップ画像とメインカラーを変更したサンプルになります。メインになる色が変わると印象が大きく変わる事がサンプルを比較することにより視覚的に伝わると思われます。サイトを見せたいターゲットによってこのようにページを作り込みを行いターゲットにマッチしたサイトを構築いたします。

スタートアップ向け

新しいサービスを始めたり、クラウドファウンディングを行う等、業務やサービスの概要を説明しお客様へ案内するページのサンプルとなります。インパクトがあり、「サービスを利用してみたい」「出資をしてみたい」と考えていただけるページを制作致します。

組み立て式携帯電話システム

動きのあるページ

インパクトを重視し、スクロールするたびに動きが発生するページに致しました。多少演出過剰で鬱陶しく感じる部分もあるかもしれませんが、閲覧する人に今までにないものを知ってもらう為に押しの強いページにしてあります。

読んでいいくうちに引き込まれていくページを意識して制作致しました。

拡張を考えた構成

このサンプルサイトは演出が多いのですが、ページの目的は各コンテンツへの誘導元でありスタート地点ともいえます。商品開発の初期段階ではシステムの全体像を説明し、開発が進みお客様に商品を見せられる段階になった際には、このサンプルページから展開したページを用意しサイトを広げていく……というようにサイト全体を大きくしていく事を想定しております。

シティサイクル風ロードバイク

インパクトのあるデザイン

大きな画像とメッセージで、初めてページを見たときにページを印象付けられるようなデザインにしました。まずは見てもらわないと始まらないからです。世の中に既にあるものを紹介するのであれば大きなインパクトは不要かもしれませんが、このようなスタートアップの商品は過去にない商品を販売する事もよくあるため、何よりもまずはページをみたインパクトを重視した構成にしております。

シンプルで直接的な内容

まだ実際の製品ができていない段階で見せるページとなるため、このような製品をいつまでに出荷するというスケジュールを伝えることを第一としております。実際のサンプルができた場合は、動画などでページを追加していくイメージとなっております。

スマートフォンアプリ

アプリケーションのイメージを伝えます

実際に触って使ってもらわないと、スマートフォンのアプリケーションの良し悪しはわかりません。しかし各種ストアではそのアプリケーションがどのような内容で、どのような機能があるかがなかなか伝わりません。更にアプリケーションは数多く配信されており、普通にやっても他のソフトに埋もれてしまいます。

ストアの商品ページとは異なり、自社のページですのでアプリケーションを詳しく説明することができます。じっくり説明して、できれば興味をもって使ってもらいたい……そのようなイメージでページを制作しております。

スマートフォンファースト

こちらのページで紹介しているものは、スマートフォンのアプリケーションとなります。そのため、パソコンでもこのページを確認してコンセプトを伝えることはできますが、スマートフォンユーザを重視してデザインを行いました。

宿泊・旅行関係向け

宿泊施設や、旅行関係の会社向けのページサンプルです。直接お客様とやり取りすることが多い業種ですので、親しみやすく多くの人に見やすいレイアウトを心がけて制作致します。

温泉旅館のサンプル

おちついたデザイン

「温泉」らしく、まずは見た人が安心できるページを意識しました。また、和風で有ることを強調したデザインとなっております。

大きな画像を大量に使用

温泉をアピールするために大きな画像を中心に構成しております。文字情報で細かく伝えるよりも、映像のインパクトを重視したデザインです。

動きがあり、更新しやすい構成

文字や画像が動くようにして、印象に残るようなページを目指しております。またブログを内部に組み込むことにより、頻繁に更新する部分はブログ、建物の内装など変わりにくい部分は固定ページと棲み分けを行います。

ホテルのサンプル

コンパクトなデザイン

ホテルのサンプルとなります。大きな何百室もあるようなホテルではなく小規模なホテルをイメージしております。ペンションなど小さい宿泊施設にも対応できる構成となっております。

高速に展開するページ(PCの場合)

ユーザ側からはわかりにくいのですが、1つのHTMLでページが構成されております。そのため読み込みを後は高速に動作します。また画像以外は非常にコンパクトに作られているため、読み込みも高速でユーザに負担をかけません。

旅行会社のサンプル

小さい旅行関係会社

小さい島の旅行代理店を制作しようとしておりましたが、そこから少し変化をつけて、島への移住を斡旋する会社をイメージしてサンプルページを制作しました。大きな写真で島の魅力を発信すると同時に、地域密着の情報を伝える温かみを感じるページとなっております。

デザイン重視のページ構成

このページは「お客さんが欲しい」「移住者をもっと増やしたい」という直接的な目標ではなく、まず「島を知ってほしい」と考え作られております。多少操作性を犠牲にしても画像を大きく、島の印象を良くしようという"シマノヌシ"の気持ちを表現しました。
そのように少し特殊なページではありますが、それでもスマートフォンでの閲覧を想定してレスポンシブデザインになっており、基本は疎かにしておりません。

ページのトップへ戻る