カテゴリー: Web制作の考え方

地方でWeb制作をがんばっているみなさん、こんにちは。

僕もフリーランスになる前は岡山という大都会と呼ばれている田舎にある小さなWeb制作会社で働いていました。今は京都に住んでいますが、仕事はほとんど岡山からもらってますし、京都はITでいえば都会とは言い難いレベルなので、地方と大して変わりません。

さてさて、僕が岡山の制作会社に入って１年半くらいでしょうか、僕のコーディングスピードは社内では早いしいろんなことがわかるし、jQueryもphpもちょっと書けるし、地元の勉強会とか出ても技術的にはまぁまぁ比較的いろんなことができるっぽいし、もうほとんど神に近いレベルに達しているんじゃないかという錯覚に陥ってたんですね。

ところがある日、真の都会大阪で開かれるちょっと大きめの勉強会に参加する機会があったので、会社の経費で行ってきたんですよ。するとどうでしょう。。。

…え？
俺は今まで何してたの？

と思うようなよくわからない技術のオンパレードで。（BEM、Sass、Vagrantなど・・・）

「いやいや待て待て、講師だから、やっぱすごいんやろな。みんなきっと面食らってるに違いない…」と周りを見てみると、むしろその技術を知らない人のほうがおかしいみたいな顔してるじゃないですか。え？htmlを素で１文字ずつ書いてる人まだこの世にいるんですか？みたいな顔。いちおう僕も顔だけはそういう顔をしておきました。

その日、僕は懇親会に行く予定でしたが、なんか行ったら泣いちゃいそうなのでキャンセルして夜の大阪を一人で徘徊していました。あの日行った立ち飲み屋の刺身と日本酒、おいしかったな…

後日

そんな雷に打たれたような経験の次の日から、勉強会で見たことをすぐに猛勉強しました。これぞ勉強会に行ったという感じですよね。

そして得た技術を、社内で共有することに努めました。BEMを初めて見た人はコーディングがすこぶる早くなったと泣いて喜び、Sassという画期的な技術でcssを書くのが楽になったと日夜お祭り騒ぎです。
Vagrantは正直あんまりでした。これなら単発でバリバリ制作するタイプの弊社はXAMPPのほうがええやんってなりましたので、全部の技術が最適とは限らないこともわかりました。でも、とりあえずやってみるっていうのは大事です。

今となっては上記の技術すら古いですよね。今は、DockerとかReactとかなんですかね？残念ながらもう僕はあんまりスキル方面を伸ばす予定がないため、技術メインの勉強会に行くことはほとんどないと思いますが、フロントエンドの技術はどんどん新しいものが生まれていって、キャッチアップは大変だなと思います。

こんな感じで、田舎の小さな制作会社で、自分のことをすげーできるやつだと思っていた愚か者が、都会の技術にぶん殴られて帰ってきて、その技術によって会社とともに圧倒的成長を遂げるきっかけになったわけです。

おわり

ツイッターでたくさんのつよつよ技術者をフォローしていると、けっこう自分の知らない技術を目にすることが多いので自分が遅れていることがわかりやすいですが、小さい世界に閉じこもっていると、自分を助けてくれる技術があるという認識すらせずに過ごしがちです。

普段から本とか技術系ブログとか読んでても、入ってこないことはやっぱりありますよね。

なので、地方でWeb制作をしている人やプログラマーたちは、ぜひ都会で開かれるちょっと大きめの技術系勉強会に参加してみてください。世界が変わります。自分も成長し、会社も成長し、売り上げアップ！社員は増える！ボーナスもらえる！早く帰れるようになる！いいことしかありません。

勉強会の探し方は以下の記事にも書いています。

シンプルに選ぶ。Web系セミナーやイベントの探し方

都会といえば、九州のほうはわからないんですが、だいたい東京か大阪だと思います。特に東京はほとんど毎日のように何かしらやってますよね…

今はコロナの影響もあり、ウェブでセミナーをおこなう「ウェビナー」という形態が一般的になっているようなので、前より参加しやすいんじゃないでしょうか。

それじゃ、バイバイ！

ウェブサイトにアクセスすると、たまに長ったらしいオープニングアニメーションを見させられることがあります。

ユーザーは、サイトにアニメーションを見に来ているわけではなく、情報を知りたくてアクセスしているので、5秒間のアニメーションですら煩わしい。そこに残る感想は「お～イケてるサイトやん」ではなく、「アニメーションなっが。」というマイナスなイメージのほうが圧倒的に強いです。

よくある、スクロールするとふわっと要素が現れるやつ。あれも、0.2~0.3秒くらいならまだ許容できますが、それ以上長いと、出てくるまでの待機時間が煩わしく感じられるようになります。

この無駄に長いアニメーション、いったい誰にメリットがあるんでしょうか？

以上、残念ながらメリットはほぼありません。

そもそもユーザビリティが下がる時点でウェブサイトとしてはアウトです

なぜここまで誰にもメリットがないアニメーションをつけたがるのか。それはやっぱり、「イケてるサイトを作っている」アピールをしたいんだと思うんですが、本当にイケてるサイトというのは、ユーザーの満足度を一番に考慮するべきです。

じゃあ何すか？アニメーションはいらないってことすか？

アッ、ち、違います、そうじゃないです。

アニメーションはつけることで、確かに「いい感じのサイト」とユーザーに思わせる効果はありますし、特徴的なアニメーションであれば、サイトオーナーや制作者に興味を持たれるきっかけになります。

大事なのは、「ストレスを感じるほど長くならないように心がける」です。

オープニングアニメーションも３～４秒ならまぁ見れますし、ホバーやスクロールアニメーションも0.2~0.3秒のアニメーションであればストレスにならず、逆にちょうど良いスピードのアニメーションは気持ち良く、ユーザーを飽きさせないスパイスになります。

長いアニメーションが有効な場合もある

例えば、クリエイターのホームページだったり、サイト内の情報ではなく、サイト自体を見てほしい場合。

あとは、商品のLPなどで、商品をしっかり魅せたい場合。

こういうときは、長いアニメーションでも、魅力的であればプロモーションとなりますので、非常に有効です。

おわり

アニメーションでユーザビリティが下がるなんてことはクライアントは知る由もありませんので、だいたいは提案側の責任です。

ウェブディレクターは、提案の際に無駄に長いアニメーションをつけたいと言われたら「ユーザビリティが下がる＝コンバージョン率に影響するのでオススメしません」とちゃんと言いましょう。わざわざサイトからの売り上げを下げるために不要な実装工数を支払うなんてほとんど詐欺みたいなもんです。
それでもつけたいと言われたら、つけるしかないですけどね。

ではでは、ストレスフリーでイケイケなアニメーションを実装しましょう！

バイバイ～

最近Twitterで、「Webデザイナーはコーディングもできてようやくスタートライン」という意見が話題になっています。

これについては賛否両論で、今に始まったことではなく昔からずっと議論されていたことなのですが、デザインできないコーダーである僕の個人的な意見を語ろうと思います。

先に結論から言ってしまうと、

というのが僕の見解です。

Web向けのデザインになってない

今はCSS技術も発達していて、大抵の装飾であれば実現可能となってます。
それ故に、「画像は極力使わず、CSSで表現してね」という要望が増えています。

LPなんかも、昔は画像をベタベタ貼り付けるだけでよかったんです。
SEOとか関係ないですからね。

でも今は、LPもテキストがメインとなってます。

そんな時代、これはWebではなく紙媒体向けのデザインだよねみたいなのが来ると、正直困ります。

例えば、

などなど…

こういった項目って、コーディングができるどうのこうのよりまずWebデザインの基礎とも呼べる部分だと思うんですが、コーディングを全く知らないデザイナーはこの辺が出来ていないことが多いです。

このあたりのことがしっかりできていないと、見た目はもちろんWebでは見るに堪えない見た目になっちゃいますし、コーディングがめちゃくちゃ時間かかるし、コーディングに時間がかかるってことは単純にコーダーがしんどいだけでなく、工数的にも赤字になりますので、いいことはありません。
ちょっとの工夫でコーディングしやすいデザインにしていただくだけで、コーディングにかかる時間はかなり減ります。

「コーディングでできること、できないこと（時間がかかること）」を知っておくと、必然的にこのあたりの欠点は改善されます。

見づらい、使いづらい

「そうはいってもクライアントがそうしたいって言ってるし、コーダーががんばればいいじゃない？」

オーケー、コーダーがんばります。
例え残業続きでドロドロになり、あなたを呪いながら今後生きていくのを良しとするのであれば、いいでしょう。
仕事だから、いやいややります。

だけど、まぁちょっと待ってほしいんです。

最終的に、そのサイトを見るのは誰かと。

上司？クライアント？
デザイナー私？

いいえ、違います。
一般ユーザーです。

そして、いくらクライアントや上司、デザイナーわたしが良しとした破壊的デザインと言い張っても、一般ユーザーが見づらい、使いづらいと感じたならば、そのサイトは、「壊れ切ったゴミ」です。

コーディングがちょっとわかる状態であれば、htmlの構造をなんとなく理解し、ユーザーが見やすい、使いやすいというのがどういうことなのかが自然とわかってきます。

というか、コーディングしてると、「うわ、これ使いづらいやろなー…まぁ命令だからやるけど」という多々あるので、むしろどうなってれば使いづらいかがわかるんですよね。

僕は制作会社に勤めてたときは、コーダー兼ディレクターというような立ち位置でいましたが、デザイナーから上がってきたデザインを確認するときはまず「使いづらくないか、わかりにくくないか」を最優先に考えてます。

コーディング大変そうだなー、は、まぁあまりにもしんどそうだと相談することもありますが、基本的にはデザイナーの夢を叶えるべく努力するべきだとは思ってますので、そこはいいんです。

そこまではできなくていい

コーディングのプロフェッショナルと言われるほど、コーディングができるようになる必要はないかなと。

むしろ、デザイナーはデザインに集中し、コーダーはコーディングに集中したほうが、役割分担もできて効率よく高品質なWeb制作ができます。

もちろん、デザインもコーディングも一人でできたら素晴らしいんですけどね…まぁ、そこに到達するには相当な努力と経験が必要だと思います。
大抵は、どちらも微妙な中途半端なクオリティになることが多いんじゃないでしょうか。

フリーランスとかだと、たまに一人でなんでもできる方がいらっしゃいますが、僕はデザインは一切しません。
得意じゃないことを仕事にしている余裕はないですからね。

ただ、デザインは仕事としてはしませんが、
デザインの本を読んだり、実際にPhotoshopでデザインをして、サイト制作までやったことはあります。

これはもちろん、デザイナーがコーディングを知っていればいいと思うのと同時に、コーダーもデザインのことを知っていればいいと思うからです。

例えば、「デザインは作ってないので、既にあるページにトンマナを合わせ作ってください」とか、「レスポンシブはお任せします」とか言われたときに、デザインの知識があるかないかでは大違いですよね。

テンプレートを使うにしても、イケてるファーストビューやUIを設計するためにはデザインの知識は不可欠です。

いろんな人のデザインを見て、実際に自分でもデザインしてみて、「デザインのパターン」のようなものを知っていたほうが良いサイトになるのは間違いないです。

いやフレームワーク使えばええやんと思うかもしれませんが、そりゃそうなんですけど、それにしてもフレームワークだけに頼っていると、どこにでもあるテンプレート的なサイトになっちゃいますよね。
もちろん、そういうサイトを時間をかけず量産してビジネスにするのも全然ありなんですけど、自分で運営するサイトはなんとなくいい感じにしたいじゃないですか。

使いやすさだけにこだわりすぎて、視覚的につまらないサイトになるのもちょっと考え者かなと思いますので。

おわり

なんかデザイナーにがんばってくださいって言ってるような記事になっちゃいましたが、僕はむしろコーダーにこそがんばってほしい。

デザイナーから来たむちゃくちゃなデザインを再現するのをがんばるのではなく、デザイナーとのコミュニケーションをがんばる。育成をがんばる。

しんどいなこのデザインと思ったらデザイナーに伝えて直してもらえばいいし、もし既にクライアントに提出しちゃって直せないのなら、「こういう理由でしんどいので、次からはできればやめてほしい」というような相談をすればいいんです。

実際、僕もフリーランスという立場ですが、厳しいデザインが来たら直してほしいと普通に言いますし、逆に「どういうデザインだったらコーディングしやすいか」って相談受けることもありますよ。

自分がしんどいことをただSNSで愚痴をこぼすだけじゃ何も変わりません。
それに、デザイナーだってしんどいに決まってますので。
仲良く協力して、良いWeb制作しましょうねってことで。

バイバイ！

「新規に事業するから、ホームページ作ってもらおうと思って制作会社に電話して料金聞いてみたけど、高すぎて無理…自分で作るか…」

そして知識もないのに自分で作った結果、明らかに素人が作った見るに堪えないホームページになってしまい、結局ホームページがほとんど機能しないまま後でプロに頼むことになる…そんなパターンを僕は何件も見てきました。

僕は制作会社に技術責任者として勤めていたので、制作の見積もりをいつも作っていました。今もフリーランスで制作をやっていますので、見積もりを作ります。ただ、高いですよね…わかります。でも、高いのには理由があるんです。

今回は、制作側の立場からなぜ制作会社にホームページ制作を頼むと高いのかという理由を説明するとともに、できるだけ安く済ませる方法を紹介します。だから、どうか知識もなく自分で無料で作ろうとしないでください。

高額の理由は、”フルオーダー”にあり

なぜ制作会社に頼むとそんなに高いんでしょうか。安くても30万とか、一般的には50～100万くらいかかりますよね。

その理由は、フルオーダーでゼロからサイトを作り上げることを前提としているからです。

ゼロから作るとなると、そこには様々な工数が発生します。例えば以下のような感じ。

何を言っているのかわからないと思うので、それぞれどのようなものかざっくり解説します。

ディレクション

クライアントからヒアリングを行いサイトのデザインや構成を考えたり、スケジュールやタスクをスタッフに割り振ったりする、いわゆる「監督」のようなものです。

ヒアリングではホームページを作る目的や背景、そして要望を聞きだし、最適なサイト構成を導き出します。また、スタッフのスケジュールや能力を把握し無理のない納期を設定し、関わる全ての人間と連絡をとりながら進行を管理します。知らない人からは「何この項目いらんやろ」と思われがちな部分ですが、実はけっこう大変なんです。

コピーライティング

ホームページに載せる文章やキャッチコピーなどを考える工程です。どのページにどんな情報を載せるかというのはディレクションの段階でだいたい決まっていますが、この段階でもっと詳しく情報を整理し、ワイヤーフレームを作り、校正も行っていきます。

撮影

場合によっては、カメラマンを連れてクライアントの職場に訪れ商品や人物、内観・外観などの撮影をします。人を使いますので、もちろんお金がかかります。

撮影なしで写真素材でいいパターンもありますが、フリー素材とか正直制作ではあんまり使わないと思うので、基本は有料素材サイトから高品質な画像を購入して使います

デザイン

いよいよデザインです。ここがやっぱりかなり工数かかりますね。

ワイヤーフレームからデザインをおこし、プロの素敵なデザイナー様たちが抜群のセンスでブラッシュアップを行っていきます。ここではクライアントとやり取りをしながら、希望のデザインに近づけるようがんばる部分なので、かなり時間がかかる想定となっています。

コーディング

コーディングはデザインモックアップをブラウザで見られるようにするよう、html,cssをゴリゴリ書いていきます。

この段階では、見た目や仕様はほとんど決まっているためデザインよりかは工数少な目の場合が多いと思いますが、それでもトップページをゼロから作るとなると半日くらいは余裕でかかりますので、うーん高いなーという感じになると思います。

ただし、ここでjavascriptをめっちゃ書かないといけない場合（アニメーションとか、サイトの動きが凝ってる）、実装にすごい時間がかかりますので恐ろしい値段になります。怖いですね。

システム構築

お問い合わせや予約フォームであったり、CMS（コンテンツマネジメントシステム）の組み込みであったり、SNSとの連携であったり、ホームページに何か機能をつける場合に発生します。

通常のホームページであれば、今はphpという言語を使うことが多いと思います。これはhtmlやcssコーディングとはまた違ったもので、構築に時間がかかります。

サーバー、ドメインの取得・管理

制作会社でゼロからホームページを作る場合、レンタルサーバーとドメインを契約し、制作会社で管理をする場合が多いと思います。

サイトのリニューアルを頼まれたときは、「どこでこのレンタルサーバーの情報を手に入れて使っとんやろか…」と思うレベルの謎の低スペックサーバーを使っていることがけっこうあって我々エンジニアは泣きそうになります。

・

・

どうでしょうか。フルオーダーでの制作はけっこういろんなことをしているのがお分かりいただけたかと思います。

これに対し、一般的には「人日」という計算方法で見積もりが出されます。例えば、一人が一日かけて作業してようやく完了する工数は「１人日」です。そして、１人日はだいたい４～６万くらいすることが多いと思います。

つまり、４日かかる作業があるとしたら単純に４倍になる（＝20万くらい）ということです。やばい。

これが、制作会社に頼むと高くなる理由です。「作業した時間を売る」という見積もり方法が一般的なので、フルオーダーだとすごいことになるというわけですね。

制作会社に安く頼む方法はあるのか？

あります。

フルオーダーだから高いということは、つまりフルオーダーじゃなければ金額が抑えられるということです。

例えば以下のような方法で、工数を減らすことができます。

テキストや素材を提供する

「載せる文章や使う写真はこっちで考えて渡します！」というパターンですね。

そうすれば制作会社側は、校正や写真の加工は必要になりますが、大幅に工数を削減できます。ただし、「めっちゃ加工しないと使えない写真をどうしても使ってほしいという無茶振り」をすると、もしかしたら追加費用を請求されるかもしれないです。

WordPressのテンプレートを使用する

これが一番工数削減効果が高いです。見積りを頼むときに、「WordPressテーマを使って安くしたいんですけど…」と言ってみましょう。もしかすると制作会社によってはできないと言われることもあるかもしれませんが、できる会社は少なくないでしょう。僕だったら喜んでお請けします。

WordPressとは、CMS（コンテンツマネジメントシステム）と呼ばれるソフトウェアの一つで、世界中のホームページで圧倒的に使われています。

WordPressのテンプレートを使えば、例えば以下のようなサイトが簡単に作れてしまいます。

すごい。

もはやサイトの構成やデザイン、コーディング、システム構築が完成されていますので、工数を大幅に削ることができます。

実はこういったWordPressテーマは、コーディングの知識がなくても、管理画面から画像や文章を設定してレイアウトやコンテンツを編集することができるので、自分でプロ並みのホームページを作ることも可能です。

ただ、それでもやはりWordPressを理解し構築するのは時間がかかりますし、どんなテーマがいいのかイマイチわかりづらいと思いますので、ホームページ制作に精通しているプロに任せたほうが手っ取り早く見栄えも良いサイトになるのは間違いないです。

最初は必要なページのみ作り、徐々にコンテンツを増やしていく

予算がない最初の段階でホームページを完璧に作り込もうとせず、とりあえず最低限機能するホームページを作っておき、ホームページから集客しながら事業を拡大させるとともに、徐々にコンテンツを追加していく、といった方法もかなり有効です。

このパターンで見積もりをお願いするときは、コンテンツを追加するときの見積もりも一緒に頼んでおくといいでしょう。

おわり

引越しや家を建てるときと同じで、何にいったいそんなにお金がかかるのかを少しでも理解しておくと、なんとか安くする方法はないかと相談しながら進めることができます。

そのうえで、いろんな制作会社から見積もりをもらうのもありですね。会社によって全然値段の付け方が違ったりするので、少なくとも２社には見積もってもらうといいと思います。

ちなみにですが、見積もりを頼むときは電話よりメールのほうがいいですよ。本記事で書いたように制作にはいろんな工程があり意外と複雑なので、すぐに正確な見積もりを出せない場合が多いんですね。

なので、「新規にホームページ作りたいんだけど、だいたいでいいから今すぐ料金教えてくれん？」といきなり電話しても、制作側としてはまったくどんなものを作りたいかわからないので「うーん…制作の内容によってかなり変わってきますが、最低でも50万くらいは見ておいた方がいいと思います…」と言うしかなくなってしまいます。

メールで、もしくは直接会って詳しい話を聞きながら、相談していくのがベストです。

ではでは、良いホームページを作りましょう！