Web Design

カフェのサイトをwordpressでリニューアル制作しました。その時の覚書


みなさんこんにちは、mayukouです。
さて、今回はwordpressのお仕事実績のご紹介です。
ブログCMSであるWordpress のメリットといえば、
一度構築してしまうとあとはhtml の知識がなくても、誰でも更新ができるところ。

クライアントさんが更新できるので、やりとりの手間が省けます。
その代わり、htmlサイトよりもサイト構築には時間と労力がかかります。

身内が東京新宿に開いているカフェが先日3周年を迎え、
その機会に合わせてリニューアルさせていただきました。
仕事の合間をぬっての製作だったこともあり、
レスポンシブ対応などまだ構築中の部分もありますが、温かい目で見ていただけたらと思います。

今回はそんなサイトの紹介と工夫した点などをご紹介したいと思います。

スポンサードリンク

今回製作したお店・カフェアリエとは

新宿の大久保に、隠れ家のように佇むカフェです。
日本の有名な建築家である磯崎新の処女作で有名な建物を使用しています。
今では、そんな隠れ家的カフェとして親しまれているようです。
ハーブティーも取り扱っています。今回製作したサイトはこちら↓

65-cafearie

カフェアリエサイトはこちら
http://cafearie.com/

作業工程は、

デザイン→コーディング→wordpressに組み込み→本番サーバーにアップ

の順番です。

工夫した点

デザイン面

すっきりと白ベースのシンプルなデザインで見やすくし、
その中でも手書き感を取り入れました。
カフェアリエのシンボルでもあるアイビー(植物)をあしらいました。

コーディング面

勉強のためCSSと同時にSASS (CSSメタ言語)を使用。
※SASSについては後日ブログで紹介予定です^^

WordPress面

WordPress でニュースの更新、その他のページの書き換え、修正が可能。
フッターはウィジェットにしているためここも書き換え可能。
メニューページ部分は、簡単にメニュー名が追加できるsmart custom fieldsを使用。

65-cafearie-wp

66-menu

大変だったところ

wordpressサイトをローカル環境からサーバーの方に移行するのにDuplicatorプラグインを使用したのですが、
うまくwordpressに移行できなくなり、
間違って以前のイベントのブログを消してしまいました。
バックアップは取っていたものの、wordpressのバージョンが低かったためうまく復元せずに焦ってしまいました。
復元できなかったとき、血の気がサーっと引いていきました。
wordpressの先輩に助けてもらいなんとか復活することができました。
本当に感謝です。

これから注意しておきたいこと

・Wordpress の場合、念のため最新バージョンにしてバックアップを取ること。
・Duplicatorの仕様に慣れる。
・焦りすぎない。スケジュールは余裕を持ち、早めに作業に取り掛かること。

最後に

いかがでしたか?
wordpress案件、今回の気づきを糧に今後も請け負っていけたらいいなと思います。
まだまだ勉強の身ですが、今回のサイト製作はとても勉強になりました。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  2. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  3. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  4. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた

    みなさんこんにちは、mayukouです。ウェブデザインのトレンドであ…

  5. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

  6. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Illustrator

    助かった!Illustratorが重たい時の対処方法
  2. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便…
  3. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは
  4. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法
  5. マーケティング

    コンテンツマーケティングにおける有益な記事とは?ブログ運営3年目の私の最適解
PAGE TOP