YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2017.04.27

【サイト制作者必見!】続!納品後を見越したサイトを作るために気をつけたいこと

【サイト制作者必見!】続!納品後を見越したサイトを作るために気をつけたいこと

前回、WordPressについて解説しました「納品後を見越したサイト制作のコツ」ですが、納品方法はWordPressだけではありません。最近は誰でも気軽に使用できるCMSが続々とリリースされています。また、クライアントが元々HTMLベタ打ちサイトを更新していたという理由から、CMSを使用しないサイトの制作を依頼される場合もあります。
今回も具体的な例を元に、クライアントの要望を叶えつつ、納品後に自分にも負担の少ないサイト作成の秘訣をお話しします。

CMSでの納品の場合~クライアントが編集する部分は、必ずオリジナルのマニュアルを作成し渡しておく~ 

前回お話ししたように、クライアントは基本的にサイト運営に経費をあまりかけたくないと思っているため、納品後は「自分たちで更新したい」という要望をいただくケースが非常に多いです。 
その要望に一番応えられるのが「CMS」での納品です。

優秀なCMSは通常ホームページとして見ているビジュアルのまま、HTMLをいじらずに編集できるようになっています。
そのため誰でも直感的に操作できるのが大きな利点です。しかし、それでもクライアントに話しておかないといけないことはたくさんあります。 
 
例:jimdoの場合 
https://jp.jimdo.com/ 
(レスポンシブデザインにも対応したテンプレートが豊富。また、自由にカスタマイズもできるのでオリジナルデザインも適用したままビジュアル画面でテキスト等が編集できるところが最大の魅力) 

jimdoはログイン後、編集したい箇所をクリックすれば誰でも簡単に掲載内容を編集できる大変優秀なCMSです。
(※あくまで筆者個人の見解です)

201704271504_1-500x0.png
↑編集したい部分を直接マウスでクリックしただけで、今見ている画面のまま内容が編集できます。 

しかしそんな jimdo にも弱点はたくさんあります。

・自動バックアップ機能がない
・独自ドメインでのメールアドレスがひとつしか発行できない
・ブログが機能の面でほぼ使えない


バックアップに関しては WordPress編でもお話ししましたが、納品後の手離れをよくするために大変重要な要素です。また、メールやブログの機能に関しては、クライアントにどの程度利用するのかを事前に確認しておくと、サービス選びの基準にもなり、後々のトラブルも避けられます。

実はJimdo は、有料コースに加入すると優先的にサポートを受けられる特典があるため、納品後はそちらにお問い合わせいただくようにクライアントにお願いすることも可能です。

ですが、返信の遅さや電話サポートが無いという点から、結局こちらに質問が来ることもあるでしょう……正直つらいところです(月額サポートを担当していれば別ですが)。
納品後のこちら側の負担をなるべく減らすために、筆者はPDFで簡単にまとめたマニュアルをクライアントにお渡ししています。 

201704271504_2-500x0.png
※こちらはアメブロ用のマニュアル例。 
 
簡単な編集の仕方からバックアップの取り方、すでに口頭でお伝えしたことも含めて掲載します。 
 
クライアントがストレスなくサイト運営することができ、またのちのち自分にもストレスがないようにするためにも、マニュアル作成はかなり役に立ちます。こういう心配りひとつで「またあなたに頼みたい」と選ばれるクリエイターにもなれます。
 

HTMLベタ打ちサイト~クライアントの編集ソフトを確認しておく~ 

「元々HTMLを編集ソフトで更新していたので、今後もそうしたい」
先日、リニューアルを依頼してきたクライアントから、こういう要望がありました。
 
CMSでのリニューアルの方が圧倒的に楽になるのですが、すでにサイトを持っているクライアントの場合、サーバーとドメインを契約しているケースがほとんどです。そちらの契約をそのまま維持したい、との要望はよくあるケースです。 

そのような場合に最初に確認することは 
・サーバーの契約内容
・クライアントの使っている HTML 編集ソフトとそのバージョン

このふたつです。

サーバーの契約内容については、テキストや写真を掲載するだけという内容であれば月々500 円程度のレンタルサーバーでもまったく問題ありません。
しかし、これからショッピングサイトにしたい、SSL 通信もしたい、という場合には必ずサーバーの契約内容を確認してください。 

歴史があるサイトであればあるほど、契約内容も古いものです。サーバー提供会社によっては古いサービスを新しいサービスに強制的に変更している場合もありますので一概に言えませんが、これからやりたいことに合致するサーバー内容であるかは必ず確認するようにしましょう。

そして、クライアントが使っている HTML編集ソフトにも注意が必要です。

プロのほとんどが使用しているAdobeのソフトを入手するにはやはりそれなりにコストがかかります。そのため量販店などで気軽に購入できる編集ソフトを使用していることが結構多いです。

量販店のソフトが悪いわけではありません。
このケースで問題になるのは「購入後一度もアップグレードしていない」ということです。アップグレードを行わなくてもソフトとして使用できるので、買ったときのままということがよくあるのです。
(一部アップグレードしなければ使えなくなるものもありますが)。

急速に変わるWebの技術には、古いソフトはついていけなくなるものです。
そうなると起こるのが「自動書き換えによるサイト表示の崩れ」という問題!極端な例ですが、外部CSSを読み込むという方法をソフトが対応してない場合、エラーと認識されてしまい、ソフトの自動修正機能でファイルを書き換えられ意図したデザイン表示にならない場合があるのです。

せっかく最先端のレスポンシブデザインを施したサイトを納品しても、クライアントが古いソフトで開いた途端レスポンシブが効かなくなる……そんなことも簡単に起ってしまいます。
 
もしクライアントから「ファイルを何もいじってないのにデザインが崩れた!」と申し出があった場合、このケースをぜひ思い出してみてください。
筆者はここに辿り着くまでに「ファイルも書き換えてないのにどうして…そんなことあるはずない!」と思っておりました(汗)。

そしてどうしてもソフトのせいで表示崩れが起こってしまう場合にはクライアントにそのことを伝えて、ソフトのアップグレードまたは買い替えをお願いするか、原因となっている部分を修正するなどの対策をしましょう。

原因となっている部分がたとえ今はスタンダードなWebファイルの作成方法だったとしても、クライアントにとって一番良い方法を選択し、何が何でも最先端!学校で習ったように!ということに固執せずに柔軟に対応することが、仕事としては重要な部分になってきます。 
 
クライアントの会社を訪問できるのであれば、サイト作成前にどんな環境で編集をするのかを直接目で確認しておくと、こうしたトラブルを未然に防ぐことにもつながりますので、余裕がある場合はおススメします。

Recommend この記事を読んだ人はこんな記事も読んでいます

【サイト制作者必見!】レスポンシブWebデザインをコーディングする際に気を付けたいこと

2017.05.18

【サイト制作者必見!】レスポンシブWebデザインをコーディングする際に気を付けたいこと

■制作するターゲットの年齢層をクライアントから必ず確認するスマートフォンデザインを優先する「モバイルファースト」がSEO的にも有利になっていますが、(Googleが明確に発信しています https://webmaster-ja.goo...

【デザイナー力をチェック!】何問解ける?Webデザイナー向け筆記クイズ

2017.03.23

【デザイナー力をチェック!】何問解ける?Webデザイナー向け筆記クイズ

【問1】下記画像に記されたフォント名を答えよ(a)Helvetica Ultra Compressed(b)Helvetica Light Condensed(c)Helvetica Condensed Oblique 【問2】文章中の空欄(ア)~...

【サイト制作者必見!】納品後を見越したサイトを作るために気をつけたい3つのこと~WordPress編~

2017.03.16

【サイト制作者必見!】納品後を見越したサイトを作るために気をつけたい3つのこと~WordPress編~

■その1:サイト納品後、クライアントは自分で更新したいのかそうでないのかをまずは確認するお仕事としてサイト制作をされたことのない方はあまりピンとこないかもしれませんが、クライアントは基本的にサイト運営に経費をあまりかけたくないと思って...

【ロゴがあれば3分!】フッター情報が少な過ぎてスカスカで困った…そんな時に使えるデザインテクニック

2017.01.31

【ロゴがあれば3分!】フッター情報が少な過ぎてスカスカで困った…そんな時に使えるデザインテクニック

■まずはロゴを用意。シンボルマーク部分を使いましょう。色味の確認もかねて、ロゴを入れ込みたいサイトのスクリーンキャプチャをとり、Photoshopで開きます。下準備はこれだけでOK。 右下がなんとなくさみしいですよね。ここにロゴを入れ込...

【スマホだけで大丈夫♪】スマホで撮影した写真を印象的にするテクニック

2016.12.19

【スマホだけで大丈夫♪】スマホで撮影した写真を印象的にするテクニック

■ コツは、画面にぼかす要素を入れて撮影すること!今回はインスタグラムでの投稿を想定して、スクエアサイズの写真を例にしています。撮影に使ったのはiPhone6 Plusです。 画像:人物だけを撮影するのではなく、あえて右サイドに緑、背後に排...

【無料素材を活用】サクッと作れて使える!テクスチャを重ねるだけのワンポイント!

2016.11.28

【無料素材を活用】サクッと作れて使える!テクスチャを重ねるだけのワンポイント!

■「ちょっとした」装飾であっても、大きめサイズで作ろう 小さなワンポイントとは言え、やはり何にでも対応できるサイズで最初から制作しておくのがベター。今回はPhotoshopCCを使って、印刷にも対応できるよう 300dpi 500px &ti...