有形のもの、無形のもの、WEB制作物とはマジックか？

有形のものと無形のもの、説明の難しさ

先日、弊社のスタッフがとても悩んでいる様子でした。
聞いてみたところ、クライアントと制作の間で「どう伝えたらわかってもらえるのか」と考えている様子。
なるほど、確かに悩みが尽きないポイントです。

今回はよくあるお問い合わせのケースをご紹介しながら、ホームページがどのようにして作られているのかを解説したいと思います。

まず、物件を探しているお客さんからこんなことを聞かれたらどう思いますか？

「ちょっとこの物件が気になるからー、お試しで1週間くらい泊まっていいですか？」

・・・良いわけないでしょう、借りろよ！
そんな心の声が聞こえてきそうです。

イマドキは１泊宿泊体験がある物件もあったりしますが、、まだまだ稀です。
多くの場合、お部屋の契約手続きが完了しないと鍵を受け取れないでしょう。

そう思った方、実はホームページ制作も同じです。
そう、同じなんです！

有形のものに見える「画像」や「WEB」のものの難しいところで、ホームページに置く画像（バナーと呼ばれるもの）や見出し、アイコンなどは実際に手にとって触れるわけではありません。
お客様の元に納品する場合も、データとして届いたりホームページとして完成しているものを見ていただくので実感が湧きにくいのかもしれません。
そのため、「なんだかすぐにポンポンってできちゃうんでしょう？」と思っている方も少なくありません。

よくあるご要望の１つで、非常にご説明に苦労するシーンがこちら。

「イメージを見たいので、試しに今のホームページに組み込んでもらえませんか？」

それ、もう完成形です！！
お試しじゃないです完成しちゃってます！

弊社では、打ち合わせで大まかなイメージや色合いを決めたあと、制作者とクライアントの意思をより合わせるために、制作物のイメージを画像で確認していただくことがあります。
ラフ、ワイヤーフレーム、構成図などと呼ばれている工程ですね。
その時によく頂くお返事の一つです。

また、そこからサンプルサイトで仮組みを行うこともございます。
こちらは簡単な動きやエフェクトの確認を行っていただく場合が多いのですが、その時にもよく頂くお返事です。

ホームページが出来上がるまでの流れ

通常、ホームページが完成するまではこのような流れで進みます。

納期とクライアントの意向によりデザインチェックと実装（納品）が同時に行われることもありますが、多くの場合はテストサイトやイメージでご確認いただくスタイルではないでしょうか。
そのときに、「試しに」と言われても実際にオープンしているサイトに入れてしまうとそれはもう「納品」です。
ご要望に合わせて画像の差し替えや色の変更がしやすいような環境で作業をしているところから切り出した状態だと、スムーズに変更が出来るのですが、一度ホームページに完成版としてアップロードしてしまうと少々作業にお時間がかかります。
結果的に、お客様をお待たせしてしまうことにもなりますが、「初めてWEB制作をする方」や「上司に見せないといけない方」などからご要望をいただく場合があり、ご説明に苦慮します。
まさに「業界あるあるは、誰かの”そうなんだ”に当てはまる・・・」と実感するシーンの一つでもあります。
普段、見慣れないものや聞き慣れないものですからできるだけわかりやすくご説明できればと思い、今この記事を書いています。

では、「変更がしやすい環境」とはどんなところでしょうか？

バナーや画像は何を使って作っているの？

弊社の作業環境は、イラストレーターもしくはフォトショップです。
作成するバナーや画像などをこれらのソフトを使って作成します。

画像の色や文字へのエフェクトなど、進化していていろいろなことが出来るソフトですね！
フォトショップで体型をスリムにしたり髪の毛の色や目の色を変えたりなんてこともできます。

ちなみに、ボタンや見出しのテキストなどの場合はCSSでそのまま実装することもあります。
文字を掲載する場合は画像化してしまうよりも直にコードで表現した方が編集しやすいのです。

編集しやすい？文字？画像？

そうですね、「編集しやすい」と言ってもイメージがなかなかつかないかと思います。
私達が普段よく目にするホームページは、実は専用の言語を使って作られています。

え？画像をポンポン置くだけでしょう？
そう思いませんでしたか？
実は、ホームページの裏側はこんな風になっています。

HTMLコードと呼ばれるものですね。
この「インターネットのための書式」に合わせて画像の配置やそのほかの文字を構築していきます。

JS・・・JavaScript（ジャバスクリプト）と呼ばれる「動かすための」プログラムを書き、
CSS・・・カスケーディング・スタイル・シートと呼ばれる「装飾するための」プログラムを書き、
先程のフォトショップやイラストレーターで作成した画像を使って、組み込みます。
何やら難しい言葉が並ぶようになりましたが、それぞれ専用の言語があり組み合わせて行く必要があります。

こうして、やっとホームページが完成するのです。

「え？お金払えばすぐ住めるんでしょう？」にとお客様に聞かれたときには
審査もありますし、申込書や契約書、どなたがお住いになるのかという身分証が必要だったり・・・と説明されると思います。
同じように、ホームページの裏側で行われる作業は実は多いわけですね。

では、例えばこの仕組がわかれば自分でも作成ができるのでしょうか？
答えは「YES」です。
実際に上記のようなソフトやコードを理解して上手く自分で作成されているクライアントさんも多くいます。
または社内にWEB事業部を抱え、社内のサイトを総合的に管理している企業もありますね。

ただ、そうした担当者がいない、または物件のメンテナンスなど業務に関連する部分に集中したいなどの場合は、１からホームページを構築するのではなく弊社のサービスのようにテンプレート式のものがオススメです。

「リブロ」の場合も、カンタンに画像を差し替えたり文字の色を変えたりすることができますが、
ある程度このHTMLコードをご理解いただくと編集できる範囲位がぐっと増えます。
中には弊社のスタッフが「そんな編集方法が！？」と驚くような細部まで編集をしているクライアントもいらっしゃいます。
出来る範囲に合わせて「なんでも出来るリブロ」なので、ぜひ使い倒す勢いでどうぞ！

また、これまでに「編集の経験がない！」という方にもテンプレートやより凝った編集のレクチャーなどもご用意しておりますので、ご相談ください。