現在、企業の公式WEBサイトはどのように作られているのだろうか。
弊社で請け負う場合は、WordPressを使用したサイトが多いが、シンプルなHTMLを使ったサイトも少なからずある。
シンプルなサイトは表示が早く、軽い。
またユーザーにとっても、わかりやすいのが特徴だ。
企業の情報をユーザーに伝えるには絶好だと言える。
今回そんなシンプルに作られた、企業WEBサイトの制作を担当した。

企画

新たなWEBサービスを開始するにあたり、同時に新たな会社設立をする事になり、コーポレートサイトが必要になった（ちなみにこの新たなWEBサービスも弊社で請けたのだが現在まで未公開）。
サービスサイトが先に完成したため、コーポレートサイトは、そのサービスサイトのトーン＆マナーを踏襲した。

サイトマップ

載せたいコンテンツ内容を聴き、一般的な図左のサイトマップを提出。
その後、よりシンプルなシングルページを希望されたので、作り替えたのが図右のサイトマップ。
超シンプルなサイトマップである。
Adobe XDで制作し、PDFで提出した。

ワイヤーフレーム

必要なコンテンツの配置を考えつつ、ワイヤーフレームを制作。
全ページ、特に難しい内容もなく、1カラムのシンプルなワイヤーフレーム。
トップページに重要な内容は集約されていて、他のページは「個人情報～」などの企業必須ページのため、実質ほぼトップページのみのシングルページに近い構成。
ここで各コンテンツの順番や扱いの大きさなど、フィードバックを受けて修正する。
Adobe XDで制作し、PDFで提出した。

デザイン

ワイヤーフレームに従いデザインして、とりあえず1案を提出。
トーン＆マナーは、先述のWEBサービスを踏襲した。
特にこだわったのは、トップページのファーストビュー（大きな画像部分）が、どのデバイス、どのブラウザーサイズで見ても、最初に開いた時に高さが100％になること。
これは企業のメッセージがトップページの冒頭にある場合、下につながる部分を見せずに、1つの画面にユーザーを集中させるために有効なデザインだ。
またほとんどシングルページのような構成のトップページ各要素が、なるべくまとまりのある不確定な並びになることを考慮。上から普通に並べると、文字要素が少ないこともあり、あまりに整然としてしまうのを避けるためである。

デザイン案の段階で、トップページのみスマートフォン用のデザインを作る制作会社は多い。
イメージを伝える意味で、発注先次第でそれは問題なだろう。
しかし、デザインが決定した段階では、PC用ページと同じ数のスマートフォン用ページのデザインも作るべきだろう。
デザイナーとコーダーが別の場合は、一部のページデザインをコーダーに渡し「あとはそのページを参考にして適当に」ではコーダーに負担がかかる。
またデザイナーがコーダーも兼任している場合も、出来ればスマートフォン用のデザインを作ることが望ましい。コーディングしながらデザインを考えると、意外と時間がかかったり、PC用デザインとデザイン上の不整合が発覚したりするからだ。

大きな修正はなかったが、他のトップ画像と、各要素の色替えも見てみたいとのことで、基本的なデザインはそのままにして、数案を提出した。
デザイン案に関してはFigmaで制作し、PDFで提出。何故XDではないのか。特に理由はない。

その後、最初の案に決まった。

HTML & CSS コーディング

シンプルなサイトなので、余計なアニメーションやスクリプトは使わないようにした。
通常のHTMLとCSSによってフルスクラッチでコーディング。
ここまでで、今回の作業は終了。
後は、エンジニアがフォーム部分のプログラムなどを組み込む。

完成

シンプルなWEBサイトなので、表示も早く、内容も簡潔で分かりやすいサイトが完成。
実に快適。

ブログや日々の更新が必要ないのであれば、このようなシンプルなサイトを検討してみるのも良いだろう。

音楽関連のデザインに特化したサービス

　音楽関連のWEBサイト制作、CDやDVDのパッケージデザイン、その発売告知の雑誌広告やチラシ、ポスターを専門に扱うデザイン・サービスのWEBサイトを制作しました。
　音楽関連のデザインというと一般的には先ずWEBサイト制作と他の紙媒体の制作は会社が別な場合が多いです。しかし例えばアーティストの新譜を発売する場合、CDやDVDのジャケット・アートワークを基本にWEB、雑誌広告、チラシなど様々に展開してゆきます。普通はジャケット・アートワークを決める前段階のアートディレクションの時点でどの様なイメージで売り出してゆくかの方向性を決めます。その方向性を各デザイナーに伝え宣伝媒体やパッケージを制作してゆくわけですが基本のアートワークを制作する多くの制作会社に送らなければならずかなり面倒です。またアーティストは良い意味で微妙な部分にこだわるので修正も多数回にわたりそのたびに修正データを送り直さなければなりません。その面倒を1つにまとめて引き受けようというのがこのサービスの特徴です。もちろんWEBも紙媒体も同じデザイナーが作るわけですから当然統一感も出ますし、何より経費の大幅削減になります。年々CDを含め売上が下がり宣伝広告費も削減されている音楽業界ですが、現在でも私自身大量のCDやアナログ盤を購入してますので1音楽ファンとして少しでも力になれたらと考えています。

今流行りの音楽サービスのWEBサイト

　デザインは今時のストリーミング音楽サービスSpotifyや他の多くのサイトのように、ランディング・ページのような長い1ページ完結型で1カラムを基本設計として、色も大胆なグラデーションを背景に使ったり、モノクロ画像にビビッドな色使いをしたりなどひと目見て音楽サイトっぽいイメージを押し出しました。

　Bootstrapをフレームワークとして使っています。余計なJavascriptをなるべく使わず、画像の使用も最低限にし、グラデーションもCSSで描きました。まだまだ調整する部分はありますが、割と軽いサイトに仕上がったと自負しております。

　ここまで色々語ってきましたが実はこのサービスは弊社のサービスです。アーティストのアートワーク制作からWEBサイトの制作、広告制作、書籍の制作など多数の実績がある当サービスを音楽関係の方や音楽とは関係のない芸能事務所の方にも是非ご利用いただきたいと思います。インディーズで活躍されているバンドや個人の方、アイドルの方もおすすめです。
　一度WEBサイトを御覧ください。実績も掲載しています。

double#（ダブル・シャープ）
https://d-sharp.com/

IT企業の新サービス・ランディングペー制作

　IT企業がサインサービスを開始するとの事でランディングページの制作を請けました。時間がないため制作スピードが求められました。

デザイン

　文字は大きく、余白を大きく取り、説明も最低限にして読ませるよりも文字を見せるイメージでデザインしました。レスポンシブデザインです。
　同時にサービス・ロゴ、WEBサイト中のイラストも弊社で制作しました。

https://www.cybop.biz/

WEBサイトのリニューアル

　新サービスの発表に伴いコーポレートサイトもリニューアルをするという案件でした。制作のスピード感を求められイメージを一新したいという要望に応えられたと思います。

デザイン

　キーカラーを水色に背景はIT企業を象徴する暗めの動画が支給されました。その動画背景と白を交互に配置しリズム感を出しています。
　説明に使われている線画アイコンも作成しました。

https://www.zeta-inc.co.jp/

WordPressは最も多く利用されているCMS

　一般的なWEBサイト構築はもちろん自社コンテンツ・メディア、ブログなどに多く利用されるCMSの代表WordPress。基本は無料で利用でき、SEOにも効果的なので多く利用されています。ゼロの状態から制作（フルスクラッチ）による独自テーマ制作、既存テーマのカスタマイズなど予算や方針によって様々な制作方法があります。
　 WordPressそのままではデザイン性に乏しいためテーマを適用したり、プラグインを入れたりCSSに手を加えたりして使いやすいようにデザインを整える事は必須です。
　オリジナルのデザインにこだわるのであればオリジナル・テーマの制作（フルスクラッチ）。先ずはある程度の制限がある既存テーマのカスタマイズから制作するなど用途や予算によって選択肢はいろいろあります。WordPressの設置からテーマ制作、カスタマイズ、デザイン、SEO対策、運営などお任せください。

WordPressテーマのカスタマイズ

　WordPressでWEBサイトを構築するには、

• ゼロの状態から作るフルスクラッチ制作
• 既存のテーマをカスタマイズ（編集）する
• 既存のテーマを未編集でそのまま使う

の大きく分けて3つの制作方法があります。
　今回は発注者が選択したテーマをカスタマイズする方法を選びました。ちなみにテーマというのはテンプレート（雛形）のようなものと考えてもらえればと思います。オリジナルのテーマも良く出来たものですがかなりCSSに手を入れてオリジナルとは大きく印象の異なるデザインとなりました。テーマをカスタマイズするとなるとやはりどうしても制限がありますが可能なかぎり発注者の要望を取り入れ使いやすいWEBサイトが制作できたと自負しています。
　フルスクラッチで制作する場合、かなりのコストと時間がかかりそれに見合う費用対効果があるかというと場合にもよりますが通常はないと言えます。特に制作スピードが必要な起業前後の企業やコストを掛けることが出来ない中小企業や個人の方などには、この例のような既存のテーマをカスタマイズする方法がお勧めです。

担当部分

• WordPress設置
• WordPressテーマのカスタマイズ
• レスポンシブ・デザイン
• HTML5
• CSS3

https://lifeworkbalance.co.jp/

Bootstrapを使用したリーフレットのWEBサイト化

　この例は元々8ページのサービス紹介用紙製リーフレットをWEBサイト化したものです。横に展開するリーフレットとは異なり、WEB用では縦に展開して破綻がないように再構成しました。

デザインについて

　今やどの業務分野でも対応必須のスマートフォン用のWEBデザイン。一つのHTMLファイルでPCからスマートフォンまでカバーできるレスポンシブWEBデザインが主流です。ゼロの状態からデザインを起こし、コーディングをするフルスクラッチ制作よりもCSSフレームワークの一つであるBootstrap（ブートストラップ）を利用する事により制作コスト削減、制作時間短縮を実現しています。またPCはもちろん各タブレット、各スマートフォン等様々な画面解像度を持つデバイスによる各要素の最適化などを破綻なく容易に実現できます。

担当部分

• BootstrapのカスタマイズによるレスポンシブWEBデザイン
• Illustratorデータからの画像切り出し
• 紙からWEBへの構成変更
• HTML5
• CSS3

https://www.miracle.west-gr.co.jp/

ランディングページ

　通常WEB広告のリンクから誘導されてたどり着くページがランディング・ページです。この例の場合は厳密にはランディング・ページとは言い難いのですが製品通販ページとランディング・ページの中間のようなものと言えば良いでしょうか。
　WEBでも紙媒体でも化粧品のデザインで一番気をつけなければならないのは撮影でしょう。非常にきれいな写真を使用していますのでデザインも画像に合わせています。

デザインとコーディング

　独自のCMSを使用しており弊社ではHTMLコーディングのみを担当しました。またレスポンシブではなくPCとスマートフォン画面を2つ制作しました。各デバイスの分岐はユーザーエージェントで判断しJavascriptにより分岐している通常のパターンだと思われます。
　レスポンシブと違いHTMLは全く別なのでコーディングも2回必要なのでその分作業量も増えます。

　今日飲食店に限らずですが、店舗の集客導線はスマートフォンのGoogle Mapsなどで検索→店のホームページで詳細を確認という流れになっています。そのためWEBサイト（ホームページ）のPCでの表示画面よりもスマートフォンでの表示画面の方が需要になります。
　今回依頼を請けた飲食店の場合もPC画面よりもスマートフォン画面の方を重要視して注力しました（これを「スマとファースト」と言ったりします）。

デザインについて

　保守的な紺色をベース・カラーにしていますが、店の方針が「気軽に」なので、あまり堅くならないようにしています。飲食店の場合、料理ももちろん大事なのですが、それ以上に店の雰囲気も非常に重要になります。特にWEBサイトを見て来店する方も多いので、店頭を大きな画像で見せ近くまで来た方にもすぐに分かるようにしています。また店の内部を大きな画像で紹介することで、初めて来店される方にも気軽に扉を開けてもらえるようにしました。やはり初めて行く飲食店では店内がどのようになっているのか不安だと思います。
　スマートフォン画面を第1に考えましたのでBootstrapをカスタマイズしたレスポンシブ・デザインとしています。

https://b-iida.com

イメージが非常に重要になる美容業界

　WEBサイトに限らずですが、美容業界というのは非常にイメージが重要になります。店の外装、内装、チラシ、チケット、名刺、ショップカード、スタンプカード…弊社でもWEBに限らずアナログ分野でも美容業界のデザインを多数経験してきました。
　WEBで検索しSEOで上位に表示にされる事も大事ですがキーワードを絞り込んでいかないと美容系のビックワードはどこでもなかなか難しいものがあります。SEOで検索上位に表示された後、ユーザーは店のWEBサイトを見ます。その時に見るWEBサイトのデザインはこれから来店しようとしている見込み客にとっては重要な決め手になるでしょう。若い女性が行くのであれば今どきのヘアスタイルに対応しているのだろうか？、年配の女性が行くのであれば今は流行りのヘアスタイルよりも自分の好みに仕上げてくれるのだろうか？ただ格好良くWEBサイトを作れば良いという訳ではありません。

デザインについて

　先に述べたように非常にイメージが重要になる業界ですから、画像も高品質のものが必要になります。今回別広告を制作した際にプロ・カメラマンが過去に撮影した素晴らしい画像が豊富にありましたのでそこから選出したものを使用しています。
　発注者の要望により既にあるロゴからオレンジとシックなイメージを表したいとの事から黒を地に使用しています。
　大手チェーン店はもちろん個人店舗の制作などご予算に合わせたWEBサイトを制作いたしますのでお問合せください。

　通常の旅行以外に音楽、韓流、アニメなどに関連したツアーが好評です。一般的な旅行会社のサイトにこれらの情報を掲載すると情報が埋もれてしまうためそれらの情報に特化したサイトを開設したいという要望がありました。旅行会社と直取引でしたので、社員の方と1から作りました。
　各ツアーのWEBサイトデザインも当社で制作するため、その事も考慮し全体のディレクションを考えました。

デザイン

　ディレクションの段階から関わりましたので、同時にロゴ制作も行いました。その他各SNSへのバナーもデザインしています。

https://entame.knt.co.jp/