HTML&CSSのECサイト、CSSだけで一瞬でデザイン変更!。itウェブサイト制作の3つのパターン。プラットフォームを使用する方法。プラットフォームとは、楽天とかYahooとか、ECキューブ、カラーミーショップとか既存システムを使用する方法。CMSとはWordpressとかその他の有料CMSも多くあります。CMSを活用した例として、これはCMS、Xoops(ズープス)で制作したECサイト例。静的ウェブサイトとは、1ページ、1ページHTMLとCSSでコーディングして作る方法。このページ例は、この3番目、HTML&CSSで制作した、ECサイトです。追記:最近では静的ウェブサイトは動的ウェブページと形を変えて頻度高く使われています。使用例としては、CMSにWordpressテーマを変えて、デザインをお着替えし、その動的ウェブサイトの中の各ページの中味は、静的ページで作成できるように設計するなどです。この場合もHTML&CSSのECサイトと同様に、動的ウェブサイトの中の各ページの中味は、静的ページも、CSSを取り替えることなどで、一瞬でデザインの変更ができます。以下はHTML&CSSのECサイト例です。HTML&CSSのECサイト、CSSだけで一瞬でデザイン変更!(追記:この記事は一部内容が古い場合があります。)クリスマスキャンペーンにはこう変わる!(以下画像の掲載は一部ぼかしてのせています。)【こちらがBEFORE】このサンプルサイトは、化粧品会社を想定したオンラインショップの例です。メインカラーは水を連想させる薄いブルーと、パステルカラーに近いグリーン。挿しカラーがピンク系レッドです。デモサイトはこちらです。http://webcreate.tokyo/webkadai/index.htmlデモサイトは「トップ」と、「人気ランキング」の各商品3個からのリンクだけが活きています。横幅は900pxで、15インチ以下のノートpcで開いた時、両脇に幾分、ゆとりがあるWidthにしました。基本的な静的デザインで、よく見かけるどこにでもある一般的なネットショップの雛形です。ここまではまったく面白くありませんが、ここから、展開が面白くなるのでぜひご覧ください。一瞬で下記のような、シーズンごとのキャンペーンサイトに変身できます。上記とまったく同じHTMLです。これはクリスマスバージョンのキャンペーンサイトの実例です。実際にスクロールしてみて、動きをご確認いただけます。http://webcreate.tokyo/webafter/index.htmlデモサイトは「トップ」と、「人気ランキング」の各商品3個からのリンクだけが活きています。BEFOREで、両脇にとっていたゆとり枠に、メニューやお知らせなどを固定させ、画面いっぱいにキャンペーンをくりひろげるよう、クリスマスにふさわしいデザインに制作しました。新規から制作して3~4週間。CSSの書換のみは数日。一人で全て行いました。具体的には商品ページのデザイン変更。CSS適用ページ数により1ページ5,000円から。クリスマスキャンペーンのある商品ページではこう変身します。意味がありませんので、このように、新規で制作した時から、ECサイトならではの取り組みが簡単にできるように、HTMLとCSSを整備しておく必要があります。これが事前に準備されていないと、キャンペーンごとのデザインの変更が、CSS1枚で行う事は難しくなるからです。事前の打ち合わせで、クライアント様が気づかない、このような配慮をできるかどうかが、プロのウェブデザイナーの手腕の見せどころとなります。クライアント様とのヒヤリングにはしっかり時間をかけ、Brandingで記載しているような、クライアント様の今後5年、10年の競合他社との差別を、徹底的にサポートできる、ウェブ制作を心がけます。いろいろな商品ページの変身例です。以下のような年に数回のキャンペーンの時に、キャンペーン開始と同時にサイトをお着替えさせて、キャンペーンの終了で、元に戻すを繰り返します。1枚の差し替えで行ってしまうのです。いついっても同じじゃ、お客様はだんだんあきて、遠のいてしまうのが自然のなりゆきです。いついっても変わってて、面白い。何か、楽しいことありそう!お客様の期待値をおとさない努力は、こんなところにあわられてしまいます。http://webcreate.tokyo/webafter/contents/products_02.htmlクライアント様のECサイト年間プランにしたがって、キャンペーンごとに、前日の夜中に用意しておいたCSSに変更することで、午前0時から、キャンペーンを開始することもできます。ウェブサイトは作ってからの運営が大切なのです。事前のうちあわせより価格競争だけのウェブ制作者に依頼してしまったら、こんな面白い提案は、引き出せなくなります。数字となって現れてしまう事でしょう。マーケティングの知識もあり、このような今後の運営もふまえた提案をしてくれるウェブデザイナーなら安心です。UX/UIも秀悦なウェブ表示できますieやedgeで表示されない病を克服したグラフィックピックアップ記事2020/2/20WordPressのバージョンアップで失敗する前に!ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。UX/UIも秀悦なウェブ表示でき...Jimdoでもここまでできる!コスパのいいコーポレートサ...コスメECサイトをCMSで制作した実例。齋藤天津子...2020/2/20WordPressのバージョンアップで失敗する前に!ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。カバーをかっこよくつくるポイントこのポートフォリオの中のカバーは私自身が制作しています。