制作
WDWEB制作WordPress

KOUKEN WEBの制作過程をざっくり紹介


荒木

書いた人:荒木

成蹊大学3年生。広告研究会のWEBを担当しています。広報、制作局に所属しています。


 

このウェブサイト型オウンドメディアの制作を2015年4月からはじめ、やっと形になってきました。

制作を通して、「どうやって作ったの?」「僕もウェブできるようになりたいです」といった意見を多く聞くようになりました。

興味がある方に少しでも役に立てばいいなと思い、制作過程をざっくり紹介したいと思います。

1.動機付け

当初、僕は大学3年生で、成蹊大学広告研究会に所属できるのも後、半年しかありませんでした。

残りの時間、面白いことをやりたいと考え、思いついたのがオウンドメディア「KOUKEN WEB」でした。

成蹊大学広告研究会には、ミスコンの企画立案からグラフィック、映像、フリーペーパー制作、DJなど様々なジャンルで活躍する人がたくさんいます。

そこで、成蹊大学広告研究会の活動の中で得られた経験、制作などのノウハウを部員がそれぞれアウトプットしたら面白いのではないか?色々な人に成蹊大学広告研究会を知ってもらえるのではないか?

そういうアイデアからKOUKEN WEBのプロジェクトは始まりました。

2.ウェブサイトのデザイン

2-1.手書き

目に留まるオウンドメディアにするためには、見やすいウェブデザインにしなければなりませんでした。

また、成蹊大学広告研究会ウェブサイトのアクセスはモバイルが70%ほど占めているので、フレキシブルなデザインを考えました。

まず僕は、どんなデザインにするか、軽く手書きしました。

FullSizeRender 2

 

最強に雑ですが、頭のなかが整理できます。

2-2.Photoshopによるデザインカンプ作成

次に、手書きを参考に画像編集ソフトPhotoshopでデザインカンプを作成しました。

IMG_7190

色を使い、可愛い感じで、フラットデザインっぽくしたかったのですが、どうなんですかね。

3.コーディング作業

3-1.HTML+CSSでまず作る

デザインが決定したら、今度はそれをウェブの形にします。

ウェブの形にするには

サイトの構造を指示するHTML

デザインを指示するCSS

という技術が必要になります。

この2つがわかれば、ウェブサイトは作ることができます。

ウェブをやりたかったら、まずここを勉強するといいと思います。

この2つの技術を使ってまずは形にします。

また、ウェブサイトをスマホにも対応させないといけないため、Google ChromeのWEBインスペクタを使用して、動作を確認します。

スクリーンショット 2015-06-24 23.47.38

3-2.WordPress実装

logo

今回制作しているウェブサイトはブログ形式なので、当然記事を書くことになります。

さて、HTMLなどウェブの知識が無い人はどう記事を書けばいいのでしょうか?

その問題を解決するためにWordPressを使用しました。

WordPressというのはコンテンツ管理システムで、知識がなくても、記事を更新、画像をアップロードなど、様々な管理が容易にできるようになります。

これを使えば、広告研究会の部員も簡単に記事を書けるようになるわけです。

IMG_7398

先ほどHTML+CSSで作成したサイトにWordPressと連携させるようにします。

HTML+CSS+(PHP)って感じです。

これが一番大変でした。

参考:はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました

上記の記事が非常に参考になりました。

ちょいちょい、分厚い本も読みました。

IMG_7394

WordPressはサーバー環境がないと動作しません。

そこでMAMPでローカルサーバーを立てて、その上で制作していきます。

ここも詳しく書くと長くなるので、今回は割愛します。

4.レンタルサーバーに移行

ローカルでサイトの動きを確認したら、いよいよ本番のレンタルサーバーを稼働させます。

バグが起きることが多々あるので、そこは意地でもなんとかします。

そしてようやく、完成という感じです。

こちらがパソコン版

スクリーンショット 2015-06-24 23.51.46

こちらはスマホ版スクリーンショット 2015-06-24 23.51.57

長い戦いでしたね〜。

まとめ

細かい部分は割愛させてもらいました。

ウェブサイトの制作の流れをざっくり紹介しましたが、いかがだったでしょうか?

HTML+CSS+WordPress(PHP)の知識があれば、自分の完全オリジナルなサイトを作成、運用できるようになって楽しいですよ!

僕自身がまだ勉強途上なので、まだまだなところはたくさんありますが、少しでも参考になれば嬉しいです。

そして、最後に記事を書いてくれる人を大募集しています!お願いします!

コメントを書く