ちこブログ屋のサービス・業務案内ページを作らせてもらいました!ツイートシェアはてブGoogle+Pocket私の制作物についての記事を書かせてもらいます!先日、1億PVを叩きだすブログのプロ波多野義親さんが運営する「ブログ屋」のサービス・業務のご案内のページを作成させていただきました。光栄なことです!今回、波多野さんと話して決めたテーマは「一流ホテルのような高級感」。サービス一覧ページで、どれだけ高級感を出せるのだろうか。工夫が必要だなと、私の中のデザイン魂に火が付きました。こちらの記事もおすすめですみんなと同じはダメ!最近、ご自分のサービス一覧のページを作ってる方が多いですね。私ももちろん作りました。⇒サービス一覧ブログマーケッターの松原潤一さんのサービス一覧ページをお手本に作ったんです!⇒松原潤一さんサービス一覧で、気付いたらこういうデザインばかり見かけるようになりました。波多野さんのサービスページは、頭一つ抜けた感じにしたい!!と思いました。工夫したこと高級感のある高品質な画像まずは、みんなやってるフラットデザインですが、イラストではなく、高級感のある画像を使うことにしました。これは波多野さんみずから用意していただきました。cssで斜めにヘッダーの画像も、画面の幅いっぱいにしてcssで斜めに切り取ると、洗練された感じになります。斜めデザインは、ヘッダーとフッターに使いました。全体的な背景色は、重厚な感じのダークな色にしようと思っていたんですが背景が暗いと、見やすいように文字色を白にしても、どうしても文字が見にくくなるんですよね。背景色は白を基準に、各メニューで大人が好む色を使いました。アニメーションスクロールすると文字やイメージが現れるアニメーションもcssで指定。飛び出すようなポップなものではなく、スッと現れる上品な動きにしました。見出し文字も、デザイナーの前田さんが作られたロゴに近いものを選びました。フォントは大事です!各サービスの金額を、最初赤の影付きにしてたんですが、波多野さんのご要望で、黒の太文字に。上品な方なので、金額をビビッドな色で目立たせたくなかったのでしょう。配慮が足りませんでした。ご要望通り、金額は黒の太文字にしましたが、さりげなく影を付けることで高級感を演出したつもり。苦労したこと今回、とても苦労したのは、まずサーバーの問題でした。WPXという、ワードプレスに特化したサーバーでいろいろと制限があり、ドメイン直下にサブディレクトリを置くことができませんでした。サーバーのサポートの方と何度もやり取りして、やっとドメイン直下にディレクトリを設置!サブディレクトリにはwordpressを設置できないということだったので、サービス一覧はhtmlで作りました。ワードプレスをカスタマイズするよりも、htmlでゼロから作るほうが好きなので、それはよかったんですが次の問題が。ワードプレスなら、フォームの設置は簡単です。contact7という、プラグインでお手軽にできます。普通のhtmlサイトだと、サーバーにcgiを置かなくてはいけないんですね。これがうまく動いてくれるといいんだけど、動かないときが途方に暮れる。サイト作成を仕事にしてるので、フォームを設置するための基本的な知識は当然私にもあります。フォームプログラムは一般に、メール送信を担当するPHP/CGIと、HTMLからPHP/CGIへフォームのデータを引き渡すJAVASCRIPTで構成されてるので、HTMLにJAVASCRIPTの読み込み(<script>タグ)を追加、<form>のactionにPHP/CGIのファイルへのパスを指定、<form>内の<input>等入力用のタグにnameを指定、あとはPHP/CGIの所定の場所に送信先などのオプションを書き換えてアップし、パーミッションを設定すればいい。今回はなぜかできない!cgiのプログラムがいけないのか、サーバーの問題なのか・・・もしや・・・と思ったけど、やっぱりサーバーの問題でした。cgiの設置自体、できるサーバーとできないサーバーがあります。wpxはできないとのこと。できないからってあきらめるわけにはいきません。格闘した末、解決!格闘のなかで、今回、こちらの力を借りました。メールフォームプロCGIここのマニュアルは、ほんとに親切でわかりやすい。この和田憲幸さんというプログラマーのファンになりました。マニュアルにも遊び心いっぱいで、読みやすかった!今回のような、サイトの中の一区画を作るだけの仕事でも、いろんな試行錯誤があります。いうことをテンプレ化してしまうと、作業自体は早くなるけど、全部似通ったものになってしまう。私はテンプレ化することはありません。唯一無二を目指してるので・・・お金をもらって作るからには、妥協せず、クライアントのご要望を上回るものを作りたいというのが、私の仕事への思いです。地震で中止に!?雑誌や社内報、サイトなどで文章を読みやすい段組みや改行にするには?今すぐサイトをレスポンシブ対応したいけど、どうしたらいい?制作についてこの記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。読まれるスマホサイトの作り方を検証してみました!RECOMMENDこちらの記事も人気です。制作について2016.11.28【LP制作事例】女性向けランディングページ制作について2016.12.8WEB制作を依頼されたときにまず注意してること制作について2016.4.17プライドと充実感を持って仕事をしてます制作について2018.9.9雑誌や社内報、サイトなどで文章を読みやすい段組みや改行にするには?制作について2016.5.5モバイルフレンドリーは当たり前!さらに注意してほしいこと集客・マーケティング2018.8.15お菓子屋さんへ|ネットで売り上げが上がらないのはネットショップの機能を使...制作について2018.12.30【売上が上がるサイトの作り方】サイトのクオリティは画像で決まる制作について2016.4.24読まれるスマホサイトの作り方を検証してみました!ABOUTこの記事をかいた人りりちこりりちこです。web制作をしてます。webデザインで仕事をしたい方のサポートもしてます。目まぐるしく変化していくWebの世界で生き残っていくために、日々インプットアウトプットを繰り返しています。POSTこのライターの最新記事webデザイン講座2020.1.11良質コンテンツは無料化へ。福岡国際会議場で「集客し続けるホームページを作る勉強会」を開催しました。福岡商工会議所で「あなたのホームページを成果を出せるホームページにする勉強会」を開催しました。10/7グロースハックキャンプを開催しました。12/1前田高志デザイントークイベントを開催しました。大卒後からWeb関係の仕事に従事。サイト制作、office、adobeソフトの講師を務める。剣道2段の息子の試合を見てるうちに剣道好きになる。イエモン、真心、エレカシ、ユニコーン日本のロックが好き。※掲載の記事・写真・イラスト等のすべてのコンテンツの無断複写・転載を禁じます。良質コンテンツは無料化へ。仕事としてずっとやっていけるのか不安・・・このメルマガでは、ほんとに稼げるWebデザイナーになるための役立つ情報を配信しています。