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. jQuery

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

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

  2. お仕事紹介

    お仕事紹介:保育園のお祭りパンフレットを作りました!

    みなさんこんにちは、mayukouです。過ごしやすい日が続きますが…

  3. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  4. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  5. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. iPhone

    生活が変わるかも!iphone7 に変えてみて思ったこと
  2. Web Design

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

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法
  4. Photoshop

    5ステップ!photoshopで水彩画をスキャンして切り抜く方法
  5. デザイン

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