とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

LP(ランディングページ)制作費用40万は高いのか?相場はいくらか?Web製作の現場のリアルな話。

LP(ランディングページ)制作費用40万は高いのか?相場はいくらか?Web製作の現場のリアルな話。

LP(ランディングページ)の

制作費用に関してこんなツイートが。

 

 

Web屋を10数年やってきた

僕の見解としては、

LP(ランディングページ)の制作で

「40万は妥当で、内容によっては安い」です。

 

 

LP(ランディングページ)制作費用40万は妥当。
内容によっては安い。

デザインが優れていてクオリティが高く

効果的なLP(ランディングページ)に

仕上げるには最低でも30万以上は必要と

考えています。 

 

もちろんLPで取り扱うコンテンツや

内容・ボリュームにもよりますし、

製作期間やサイト内で使用する素材を

どうするのか(写真撮影するのか)など

いろいろピンきりではありますが、

1ページとはいえ、やること、やらないと

いけないことは通常のWebサイトの立ち上げ

となんらかわらないからです。

平均を考えると40万は妥当。

 

 

LP(ランディングページ)は簡単ではない。
むしろめんどくさい。やることも多くて大変。

 LP(ランディングページ)の制作の依頼で

クライアントから

「簡単な1枚ページでいいので〜」

「そんなにむずかしいデザインじゃなくて〜」

と言われたことがあります。

 

1ページで完結する構成のせいか、

むずかしい実装はないように見えますが、逆です。

1ページだからこそ、そこに技術が凝縮しているし、

技術を凝縮して仕上げているんです。

 

 

1ページだけど縦に長いだけ。
実質通常のWebサイトと同じボリュームか、それ以上。

ただ縦に長いだけで普通のサイトと

おなじようにコンテンツのボリュームがかなり多いのです。

 

下手すると普通のサイトよりボリュームあるのでは、

というLP(ランディングページ)もあります。

またLPでは、視点の動きやマイクロインタラクション、

アニメーションなども駆使されていることが多く、

それらの作り込みにも工数がかかります。

 

そう、ただ縦に長いだけで、

ただの1サイトなんです。

1サイトやることには変わりはないのです。


一般的なWebサイトを1ページに集約しまとめるのは意外と大変。
そのまとめること自体が技術で価値があるもの。

普通の通常のWebサイトでは

ページやコーナーを分けて、

ページが独立していますがLP(ランディングページ)は

それらを1ページにまとめているだけ。

 

この「まとめている」というところが技術的に

むずかしいところなのです。

ユーザの視点や思考などを考慮して

導線とか見せ方をしっかり設計しないといけません。

普通のWebサイトを1ページに

まとめるのはけっこう大変なことです。

 

LP(ランディングページ)はSEOや集客、

キャンペーンの打ち出し方やマーケティング的戦略、

広告やスポンサーへの配慮などなど多方面を

考慮した設計になっているわけです。

リリース後の更新業務やそのほか運用する上での

ドメインやサーバなどインフラも必要です。

 

ただペラいちのページではないので、

これらの設計費用や、実装を考えると

40万円は妥当ということがわかると思います。

 

LP(ランディングページ)制作費用の相場が下がっている理由

LP(ランディングページ)の製作費用が

「高い」と言われる背景には、

クラウドソーシングなどで

安価で受けるフリーランスの

デザイナーがいることと、

事業としてLP製作を量産できる体制が整っている

会社が安売りをしているということがあると思います。

 

継続発注するから単価さげてよ、という

クライアントもいます。

「大量発注したらトータルコストで安くできるでしょう〜?

安くなるでしょ〜?」と。

 

なりませんよー。 

 

あとは無料でホームページを作成できる

Webサービスが増えていることもあって

業界全体で単価の低下を助長してしまっています。

 

 

簡単に安くできるのが悪いことではないが、クオリティを求めるのであればある程度の費用はかかる

簡単に安く制作できる、

それはそれでいいことだとは思いますが、

そこにクオリティを求めるとなると、

金額はそれなりに高くなっていくよという話。

 

40万円が「高い」という発注者・依頼者は

どのくらいが相場だと思っているんでしょうか。

5万〜10万、20万くらいでしょうか。

 

僕が発注する立場ならそこまで安いと

ちゃんとした仕事をしてくれるんだろうか、

と逆に不安になりますけどね...。

あと見た目だけじゃない、内部のソースや、

SEOなどサイトとしてのクオリティは

大丈夫だろうかと勘ぐってしまいます。

 

安く済ませたいなら無料のWebサービスをオススメする

むしろ安く済ませたいのであれば、

ペライチ、jimdo、g.o.a.t、wix、studioなどの

無料でWebサイトを作成できるサービスを

使えばいいと思っています。

 

「簡単な1枚ページでいいので〜」

「そんなにむずかしいデザインじゃなくて〜」

と言われたら、無料のWebサービスを

勧めるようにしています。

 

でもそういったWebサービスを使うのは

いやがるクライアント多いです。

 

そのLP、事業としてどの程度重要視しているか。
費用でわかる重要度。安かろう、悪かろう。

では、そのLP(ランディングページ)は

社の事業、ビジネスとしてどの程度の重要度をもっているのか。

 

お金をかけずに効果がでる、

お金をかけずに品質が高い、

というようなことはまずありません。

安かろう、悪かろうです。

安ければそれなりです。

 

まとめ

クオリティを気にするなら、

対価を、価値を買うのに

お金をかけるべきですね。

繰り返しになりますが、

LP(ランディングページ)制作費用

40万は妥当です。

 

 

--- ✂ ---

 

 

相場の参考になるサイト貼っておきます。

ferret-plus.com

web-kanji.com

www.webtanguide.jp

www.assion.co.jp

99designs.jp

www.lab-ry-works.com

www.biz.ne.jp

 

2019年7月18日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年7月18日号です。

 

気になる動向・ニュース

 

--- ✂ ---

 

 

 

note.mu

note.mu

 

jp.merpay.com

 

lo-go-lo.comhttps://twitter.com/milnii_san/status/1151796922576863232?s=20

 

www.youtube.com

note.mu

qiita.com

 

headlines.yahoo.co.jp

design-trekker.jp

designer-apartment.com

headlines.yahoo.co.jp

webliker.info

note.mu

rebe-career.co.jp

qiita.com

parashuto.com

www.lifehacker.jp

gigazine.net

www3.nhk.or.jp

note.mu

 

 

--- ✂ --- 

 

 以上です。

 

スマホサイトに記載されている電話番号は「<a href="tel:電話番号">」で電話発信用リンクにするべきか

スマホサイトに記載されている電話番号は「<a href="tel:電話番号">」で電話発信用リンクにするべきか

スマホサイトにある

電話番号はリンクにすべきか問題。

 

店舗を取り扱っているWebサイト

であればお店の電話番号が掲載されているし、

 

会社サイトであれば

会社概要に電話番号が掲載されています。

 

ECサイト、ネットショップであれば、

特定商取引法に基づく表記ページに

電話番号が記載してあります。

 

さまざまな箇所でWebサイトには

電話番号がありますが、これらすべて、

何でもかんでも「<a href="tel:電話番号">」で

電話番号を電話発信用リンクにするのは

間違いです。

 

電話発信用リンクにするかどうかは、

電話番号を記載している目的や、

Webサイトの運用を考慮して設定する

必要があります。

 

iPhoneのsafariではもともと、

電話番号を検出して自動的に

リンクする機能があり、

連続した数字は電話番号

として認識されリンクになってしまいます。

(これ誰得なんでしょうね。。。)

 

こんな余計なお世話な機能は、

ほとんどのサイトがこの機能を

無効にしてると思います。

無効にするには下記のmetaタグを設定します。

 

<meta name="format-detection" content="telephone=no">

解説:https://www.tagindex.com/html5/page/meta_format_detection.html

 

さて、このメタタグで電話番号自動検出、

自動リンクを無効にするわけですが、

電話番号をリンクにするのは、

<a href="tel:電話番号">を使います。

 

とあるクライアントワークの

Webサイト受託案件でのこと。

 

Webサイトに

電話番号表記があったので、

当たり前のように<a href="tel:電話番号">で

電話発信用リンクにしていました。

 

するとクライアントから

「電話はきてほしくないからリンクを無効にしてくれ」

と言われました。

 

受託でWebサービス、Webサイトを

製作しているとクライアントから

思わぬ指摘をもらって、新しい視点や

発想を得ることがあるのですが、

この電話番号の件でも学びがありました。

 

クライアントの要望と事情をもう少し補足すると、

 

『電話番号の表記はしておきたい。

しておかないとWebサイト、サービスとしてはどうかと思う。

ただ、簡単に電話できるようにはしないでほしい』

 

ということでした。

この発想はなかったので、

「なるほど」と思いました。

 

たしかにサイトを見たユーザから

簡単に電話をかけてきてもらっては、

めんどくさいわけですね。

いちいちそんな対応はしていられない。

でもサービス提供側としては

電話番号の表記はしておかないといけないので、

とりあえずリンクを無効にしておくという着地点。

 

逆にこれが食べログやぐるなびのように

お店紹介をして集客機能を担っている

Webサイトであれば、

ユーザが電話で発信してお店とコンタクト

をとれたほうがメリットがあります。

Webサイトから集客できるひとつの方法、

手段なので電話番号はリンクにしておくべき

と言えるでしょう。

 

と、上記のようにWebサイトに

電話番号を記載する意味を考えて

リンクにするかしないかをよく

検討するべきです。

 

電話がかかってきてほしい、

かけてほしい、電話が簡単に

かけらることにメリットがある場合は

リンクにする、ということですね。

 

ケースバイケースではありますが、

冒頭で書いた電話番号の例でいうと、

 

会社概要ページにある電話番号も、

ECサイト、ネットショップの

特定商取引法に基づく表記ページに

記載してある電話番号も、

 

電話かかってきたら

面倒なだけなので、

リンクにしないほうがよい、と思います。

簡単に電話をかけれる

ようにするメリットがないので。

リンクにしないが得策ですね。

 

というわけで、

Webサイトで電話番号を表記するときは

電話発信リンクにしたら電話かかってくる

件数がもしかすると増えるかもしれないよ、

という懸念点を伝えて、

クライアントに意向を確認するように

しましょう。

 

 

2019年7月17日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年7月17日号です。

 

www.watch.impress.co.jp

www.gizmodo.jp

企業のメディア運営やコンテンツ制作を支援するnote pro編集パートナー、くいしん、しゃかいか!、シーザスターズ、専門家@メディア、ナイルが新たに参加。計16パートナーになりました。 https://www.pieceofcake.co.jp/n/n06a1a5b38abf

 

www.kagoya.jp

www.sbbit.jp

tech.nikkeibp.co.jp

note.mu

japanese.engadget.com

note.mu

goworkship.com

blog.tinect.jp

www.mag2.com

note.mu

 

goodpatch.com 

smarthr.jp

 

qiita.com

www.itmedia.co.jp

coliss.com

 

japanese.engadget.com

liginc.co.jp

 

gigazine.net

 

note.mu

 

--- ✂ --- 

 

 以上です。

 

 

2019年7月16日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年7月16日号です。

 

気になる動向・ニュース

 

--- ✂ ---

 

www3.nhk.or.jp

www.itmedia.co.jp

 

www.lifehacker.jp

it-bengosi.com

 

登山アプリのマイクロインタラクション試作
https://note.tsumikiinc.com/n/n381dd1f7a124

 

www.lifehacker.jp

www.huffingtonpost.jp

www.danshihack.com

note.mu

note.mu

 

note.mu

qiita.com

zine.qiita.com

note.mu

note.mu

 

coliss.com

 

note.mu

coliss.com

www3.nhk.or.jp

 

 

speakerdeck.com

 

 

--- ✂ --- 

 

 以上です。

 

 

デザイン/UI設計・情報整理の基本。デザインを構成する要素を差別化して視覚的階層を意識して作ろう

デザイン/UI設計・情報整理の基本。デザインを構成する要素を差別化して視覚的階層を意識して作ろう

デザインは整形して
見た目をきれいにすることではなく、
本質は問題解決、情報設計、情報整理です。

 

今回は「情報整理」に
フォーカスをあてた記事を紹介します。

 

Webサイトの実装にあたっての
デザイン作業を細分化すると
「UI設計」というフェーズがあります。


UIを構成する要素、
つまり「構成要素」を整理して
適切に配置するのが「UI設計」

構成要素というのは、
UIに限ったものではなく、
サイト単位やコンテンツのメニューや
コーナー単位でも使用されますが、
今回はいちUIの構成要素として
話を進めていきます。

 

デザインでありがちな問題点

  • デザイン、UIがいまいちしっくりこない
  • どこかアンバランス
  • 使いにくい
  • 見づらい

 

こういった問題をかかえている場合、
構成要素の「階層」がおかしいことが
ほとんどです。
情報整理が適切でないパターンです。

 

階層というのは、
構成要素同士の主従関係のことで、
主従関係が差別化されていないと、
上記に挙げた問題につながりやすいです。

 

差別化とは、
視覚的に差をしっかりとつけよう(視覚的階層化)
ということです。

 

では視覚的階層とはどのようなことなのか。
簡単です。記事のUIを例にします。

 

タイトルタイトル
テキストテキストテキストテキスト


これだと、タイトルとテキストの
階層が同じレベルになっています。
これを視覚的階層化すると、
下記のようになります。

 

タイトルタイトル
テキストテキストテキストテキスト

 

はい、これで視覚的階層化されました。
タイトルとテキスト本文が
見た目上、差別化されていますね。

 

これは単純な例になりますが、
デザイン/UI設計する場合は、
この視覚的階層化を適切にすることで
見栄えや使い勝手に影響が強く出ます。

 

さきほど例にあげたのは
フォントサイズを大きくしたり、
boldにしただけですが、
視覚的階層化は以下の基本原理で
作ることができます。

大きさ(英: Size)、色使い(英: Color)対照(英: Contrast)、近さ(英: Proximity)、並び方(英: Alignment)、反復(英: Repetition)がデザインの基本原理となります。これらの基本を押さえておくことで、階層を作成するときに応用を効かすことができます。
(引用:http://photoshopvip.net/70872

 

より具体的な例や解説は以下のサイトで紹介されています。 photoshopvip.net

そのほか参考になる記事も貼っておきます。

デザイナー必見 視覚的階層の6つの原則 - 99designs

Webデザインにおける視覚的階層の重要性 - Qiita

 

 

2019年7月15日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年7月15日号です。

 

Googleの新アプリが凄すぎる。リアルタイム文字変換の精度がエグいhttps://www.buzzfeed.com/jp/yuikashima/google-livetranscribe

 

design-trekker.jp

 

qiita.com

parashuto.com

note.mu

qiita.com

qa.future-shop.jp

coliss.com

 

devblog.thebase.in

note.mu

coliss.com

webmaster-ja.googleblog.com

kachibito.net

devblog.thebase.in

note.mu

 

 

--- ✂ --- 

 

 以上です。

 

 

2019年7月13日/7月14日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年7月13日/7月14日号です。

 

アウトプットは「最強のインプット」だ。
https://note.montblanc.design/n/n51ca53d52fcc

 

dev.classmethod.jp

coliss.com

note.mu

gigazine.net

 

note.mu

note.mu

www.danshihack.com

note.mu

 

note.mu

 

note.mu

we-creat.net

studyhacker.net

www.mermirai.com

 

 

 

--- ✂ --- 

 

 以上です。

 

 

2019年7月12日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年7月12日号です。

 

note.mu

gigazine.net

jp.techcrunch.com

note.mu

coliss.com

gigazine.net

yasuhisa.com

qiita.com

photoshopvip.net

creive.me

www.uuum.co.jp

note.mu

note.mu

qiita.com

forest.watch.impress.co.jp

www.itmedia.co.jp

www.itmedia.co.jp

reasonable-code.com

techlife.cookpad.com

qiita.com

medium.com

blog.tinect.jp

gigazine.net

randamlife.hatenablog.com

coliss.com

photoshopvip.net

 

 

--- ✂ --- 

 

 以上です。

 

 

『記事タイトルとURLコピーする』機能いいよね

『記事タイトルとURLコピーする』機能いいよね

ブログやメディアサイト

でたまにみかける機能ですが、

『記事タイトルとURLコピーする』ってやつ。

いいですよね。

 

はじめてみたとき、

あーこれいいなって思ったんですよね。

誰かに共有したいときが楽で。

 

共有する場面といえば、

SNSに投稿するか、

Web屋だとチャットツールや

メールなんかで共有する場面は

よくあります。

 

最近のSNSやチャットツール、

アプリではURLを貼ったり、

SNSボタンをクリックすると、

サイトのmetaタグのOGP各種を

取得してプレビュー表示してくれる

ものもあるので、共有「される側」

からするとメリットはあまり感じない

なのですが、

 

「共有する側」からすると、

URLを貼るときに

ブラウザのアドレスバーからコピペ

するのが面倒だし、SNSボタン押して

ブラウザからログインさせられるのが

ひと手間だったり。

 

この『記事タイトルとURLコピーする』ボタンで

サクッとコピーできるのは結構うれしい。

 

メディア系サイトにはほしい機能。

「簡単にできる」というのは拡散・共有する側の

心理障壁を下げてくれます。

アドレスバーのURLをコピーするという

作業負担を軽減してくれます。

 

『記事タイトルとURLコピーする』ボタンに

ついては下記の記事の考察がおもしろいです。

実装方法もあるので、参考になります。

webkikaku.co.jp

 

面白かったところ、妙に納得・腹落ちしたところを

少し引用します。

「Twitterのシェアボタンって使う?」と何気なく聞いてみたところ、「使わない」とのこと。

若い女性のほうがTwitterを利用しているとのデータもありますし私にとってはかなり意外な回答だったので「どうして?」と聞いてみたところ、

「押してもログインしないといけないし面倒」

とのこと。そのとき「確かに!」と思ってしまいました。「ではどのようにシェアするの?」と聞いたところ、

URLをコピー

アプリを起動

貼り付け

とするそう。でもよく考えたらそのほうがどんなアプリでも共有できるし楽ですよね。

 

まさにこれ。

共有する側が「面倒」なんですよね。

 

なのでもっと広まって

市民権を獲得してほしい機能。