I only update when I feel like it.

tomisan.com

web制作の依頼を請けたら。【web制作これからの人向け】

web制作の依頼を請けたら。【web制作これからの人向け】

webデザイン、コーディングの勉強もしたし、そろそろ仕事としてやってみたい!
けど、、、実際に仕事を請けたとして、具体的にどうすれば?
という方向けのお話です😊


仕事に取り掛かる際には
お客様からご要望や方向性などをヒアリングしてから取り掛かると思いますが、
デザインするために聞くことと、
それを公開・運用するために確認しなければいけない事は全く別のもの。

デザインをするために聞かなければならない事、というのは
好みのサイト例、好みのレイアウト例、好みの色合い、好みの動き(アニメーション)など
基本的にはお客様の好み次第になりますね😊

好みと違うサイトになってしまうと愛着も湧きにくいので
十分に好みを聞きつつ、好みを取り入れつつ、ターゲット層などを加味しながら
ここはデザイナーの腕の見せ所!となる部分かと思います^^
※ただし、パクリはダメですょ!とハッキリお伝えしておきましょう☆


【確認すること】

1、ロゴの有無

無い場合は、ロゴを制作するかどうか。
最近はwebフォントで済ませることもありますので、Google fontなどから良さげなwebフォントを選ぶのもよいかもしれません。
有る場合は、データをもらえるかどうか確認します。

注意:adobeのwebフォントは基本使いません。
※お客様がadobeユーザーになる必要があるため(何かしらの有料プラン契約)

2、URLは(レンタルサーバ・ドメイン・SSL)

初めてのwebサイトですと、レンタルサーバを契約するかどうか、ドメインを取得するかどうかを確認します。

これらの契約は、基本的にはお客様ご自身で行っていただきます。
年間契約料などが発生しますので、それらのお支払いはお客様ご自身が管理することになります。
これらの代金は制作代金には含みません。

お客様から「レンタルサーバはどこがいい?」と尋ねられることもありますので、
ご予算と先々のことも考えたお客様に合ったレンタルサーバをご提案できるとよいですね^^

制作したwebページを制作者側がアップロードする場合は、サーバ情報が必要です。
お預かりしたサーバ情報でFTP接続しファイル等をアップロードします。

また、ドメインを取得した場合はメールアドレスも同時に取得となり、メールの設定などをお客様から尋ねられることもあります。
「分かりません、知りません」ではちょっと頼りがいの無い感じの人になってしまうので(笑)
レンタルサーバのFAQは確認しておくといいかもです😊

 

【無料ホームページ作成サービス】

お客様が無料ホームページ作成サービスをご希望されるかもですが
個人的にはお勧めしていません^^;

お客様ご自身でwebサイトの更新作業をされる場合でかつ、比較的安価で!
となりますと、具体的には
レンタルサーバ&wordpress がよいと思います。
今はサブスクリプション(月額料金でのHP作成サービス)もあるようです。

 

【SSL】

お客様から伺ったサイトのURLが、もしも・・「http://~」だったら。
レンタルサーバにもよりますが、無料SSLサービスのところもあります。
https://~」にするよう、SSLの申込みを(個人的には)お勧めします。
お客様のサイトの信頼性のため😊

 

3、SNS埋め込む?/ Google マップ埋め込む?

Twitterやfacebook、インスタグラム、TikTok等を運用する場合、
それらをwebサイトに埋め込みたいかどうかも確認します。
埋め込む場合はその部分も含めて、デザインします。

※SNSをwebサイトに埋め込む方法の選択肢、埋め込んだ時のカスタマイズの知識が必要。
※コーディングで実現できないデザインにしてしまわないよう注意。


サイトに埋め込むにあたって、お客様のSNSアカウントにログインした状態で「認証作業」等を行っていただく必要がある場合もあるため、その旨をあらかじめお伝えしておくとスムーズかと思います。
 
 
ちょっと突っ込んだ話になりますが
特に大変かなと思われるのがInstagramかと思います。
個々の投稿をひとつひとつ埋め込むのは簡単ですが、当然、更新されません。。。

【Instagramを更新させるようサイトに埋め込む場合】
●Instagram APIを使う。
facebook開発者登録。”アプリ作成”をお客様が行うのかどうか確認します。
※facebookアプリ作成で”ビジネス”選択→Instagramは”プロ”に。InstagramグラフAPI(Instagram基本表示APIを除く)となります。
※facebookアプリ作成で”生活者”選択→Instagramは”個人”でOK。Instagram基本表示APIのみ。
(facebookに開発者登録→アプリタイプについて
アクセストークン取得など頑張る部分がいっぱいです。

●API対応のツールサービス(有料)を使う。
月額/年間/初期費用などがかかりますが、各SNSの仕様変更などにも対応できるため、一番安心かもしれません。
例:EmbedSocia

●wordpressのプラグインを使う。
プラグインを使えば実装自体は楽です。※お客様に認証していただきます。
例:Smash Balloon Social Photo Feed


埋め込みするか否かにかかわらず、SNSのヘッダー画像・アイコン等を作る必要性も考えられますので、そのあたりも含めて、お客様に確認しましょう。



SNSではないですが、
動画のプレイヤーやGoogleマップを埋め込む場合も同様で、
カスタマイズが可能な範囲があります。そういった知識はデザインをする上で必須となります。
コーディングする時に実現できない・・困った!とならないよう気を付けて^^;


実際に私も、他のデザイナーさんがデザインしたものをコーディングする際、
Googleマップが思いつくままにデザインされていたため、”デザイン通りの実装は不可”としたことがありました。
(マイマップ利用でもデザイン通りは無理なデザイン💦)
それでデザインFIX、、さすがに困りました。。

Google Maps Platformクレジットカード登録が必須です。
SNSで突然バズったりしてアクセスが増大する等、無料範囲を超える可能性が全くゼロ!とは言えません。
制作者側が自分のクレカを登録するのはナシです^^;
がっつりカスタマイズするなら、お客様にクレカ登録していただきAPIキーを発行していただく必要があります。
デザインが決まってから「実はクレカ登録してAPIキーを発行して頂きたいのですけど・・」とは言いにくいですし、お客様も「えっ!?」となりますから、最初に確認しておくべき事柄ですね。。

4、テキスト・写真を用意していただく(ライセンスに注意)

基本的に、サイト内のテキストや写真はすべてお客様にご用意していただきます
(ライター業務・カメラマン業務を請ける場合は除く。)

キャッチコピー等の重要なテキストは可能な限り早め早めでお願いしましょう^^
ほとんどがテキストの流し込みの場合は、コーディング開始まで仮テキストでも十分です。

写真も、デザイン制作時には仮写真でも十分な場合もありますが、なるべく早めにお客様にご用意していただきます。
期限を決め、いついつまでにご用意をお願いします、とするのがよいかと思います😊

 

注意:仮写真を入れる場合でも、フリー写真素材は使わないほうが無難です。
たとえ仮でも、有料写真素材のカンプ版を使用するか、仮のつもりが本番でもそのまま採用の可能性を考えてライセンス上問題ない写真を使いましょう。

 

【お客様が写真をお持ちでない場合】

ライセンスがはっきりしている有料写真素材の利用をお勧めしつつ、
先に”写真のためのご予算”を決めていただいて、
その予算内で写真を選びながらカンプでデザインを制作すると
見た目も本番に近いもの&予算内に収まるように出来るかと思います。
※写真代金は、制作代金とは別です。

 

【これはNG!ライセンス不明、出所不明】

いつどこで、どのような経緯で入手したのか覚えていない、
ライセンスもどうだったか記憶にないフリー画像(イラスト含む)やフリーフォントを
何も考えずにデザインで使ってしまう事。

デザインで使う素材は、その出所とライセンスについて日ごろから気に留めておくといいですね!
イラストは自作 or イラストレーターさんに依頼がベストでしょう(^^)


お客様においても、ライセンスについて知っておいていただくほうが
安心してwebサイトを運営できますので
「どこから持ってきたのか」を明確にしておきましょう😊

良い写真が見つからない場合は、制作者側で撮影するのもアリですが
(その場合は撮影料金を含む)
一番いいのは、お客様がカメラマンに依頼して写真を撮ってもらう!こと(*^▽^*)

5、Googleアドセンス、Googleアナリティクス

【Googleアドセンス】

Googleの広告配信サービスです。
広告は、デフォルトの設定をいじらない場合あらゆる位置に自動配置されるため、見た目があまりよくない状況になりかねません。が、
広告を表示させないページを設定したり、1ページあたりの広告量を減らしたり、広告の大きさを制限したり、特定の位置に自動配置される広告を削除したり、ページ遷移する時にフルサイズ広告を出さないようにすることも可能です。
これらは、Googleアドセンスの管理画面で設定編集できますが、お客様がご自身で設定されるのか、制作者側で行うのかを確認しましょう。

 

【Googleアナリティクス】

Googleのアクセス解析ツールです。
見た目には関係がありませんが、コーディング時に特定のタグを挿入します。
タグの発行をお客様に行っていただくのか、制作者側で行うのかを確認しましょう。


コーディングまで終わってアップロードした後の話になりますが
導入するかどうかは最初に伺っておくのがいいかと思います。
申込み時にはGoogleアカウントでログインしておく必要があるため、
webサイト運用のための新アカウントを作成するのも要検討(プライベートなアカウントとは別にするということ)です。

 


以上、、
思いつくものをなんだか長々と書いてしまいましたが・・
必要最低限はこんなところ・・・かな?


自分の話になって恐縮ですが
デザイン&コーディングする時は、実現できるかをまず考えてます。
コーディング技術の話になってしまいますが
ここはJavaScriptにして~・・とかですね。
何かしらのJSライブラリを使うにしても、こうカスタマイズすればデザインはこれでイケる、とか。
CSSでこう書けばJS使うまでもなくイケるよね、とかデザインしながら想像する感じです😊

 
 

コメントは受け付けていません。