防衛装備庁のHPがあまりにもだったので勝手にリニューアルしてみた

phi phi on web

ちょっとしたネタエントリーです.

あまりにもだった HP をリニューアルしてみました. 作業時間は2時間程度ですかね.

Trigger

先々週ぐらいにこんなエントリーが流れてきました.
http://alfalfalfa.com/articles/133066.html

2ch まとめで, 防衛装備庁のホームページが古臭すぎるという内容でした.
どうせ誇張して楽しんでるだけなんだろうなと思い リンク先を見てみると...えっ...この時代にこれって...

開設日は 2015/10 と書いてある. 何度見ても 2015/10 です. つまり 2015年10月 に公開された ホームページだということです.
ほぼ now です.

ちなみにこれです.

防衛装備庁
http://www.mod.go.jp/atla/index.html

職業柄, 早速コードを見ると title タグの中身が空だったり description タグがなかったりともう...
meta タグにガッツリ Homepage Builder とあるので察しました.

ただ, 少なくとも国に関係する公式なホームページである以上は, 国内外問わず多くの人が見る可能性があるわけでそれなりのものを作らないといけないだろうと思います.

かつ, 倫理から外れない範囲で遊び心があっても良いんじゃないかなぁと.

そこで今回, トップページだけ簡単にリニューアルしてみました.

Renewal

今回作ったホームページはこちら
Home | 防衛装備庁

最初はよくある企業サイトっぽいやつにしようかなと思ったんですが,
それだとつまらないなぁと思い, 最近流行りの LP っぽくしました.

また, 本家の方はトップページにリンクが散乱してて(一部リンク切れだし...) どこをクリックすれば良いか
わからない状態だったので全部省きました.

Target

ターゲットは, 防衛装備庁って何をしているところなのかを知りたいって人を 想定しました.
ニーズはどうなのか分かりませんが, まず決めることが大切です.

ただ, こういった類のサイトの場合は, 知る必要のある重要な 情報がたくさんあると思います.
そういった情報は, トップページに載せず切り分けて, 詳細ページを用意することで解決しましょう.

どっちつかずってやつが一番ユーザーにとって優しくないです.

Technology

開発構成はこんな感じ.

  • platform as a service ... Heroku
  • Web application framework ... Express
  • view ... jade(html)
  • script ... javascript
  • style ... less(css), materialize

Heroku x Express 使えば, 開発からデプロイまで数時間で完結します.
良い時代になりましたねぇ.

あと今はこの構成ですが, 複数ページ作るーみたいなことになりだしたら riot.js 導入する感じですかね.

Design

デザインには Google の Material Design を採用しました.

海外展開も視野に入れて作りたかったので, フォントファミリーや文字サイズなどは
日本語でも英語でも違和感のないものを選択しました.

あと Footer は愛国心強めです♪

Repository

Github で公開しています. よかったら覗いてみてください.
https://github.com/phi-jp/mod

At the end

これはおそらく専門の人が作ったわけじゃないんでしょうけど, 前に炎上してた
首相官邸ホームページリニューアル費用4500万円の妥当性 - Togetterまとめ 』の件もあるわけでして,
なんで技術持ってる人に依頼しないのかなぁと常々思います.

私は日本が大好きです. そして, 国のために働いている人を尊敬しています. なので, こういった仕事をしている方を外に向けて発信していく 情報源の一つであるホームページがこの状況ってのはちょっと悲しいです.

このエントリーがツイッターやはてブで拡散されることで, 関係者の耳に入り少しでもこの状況が改善していけば幸いです.

次は高砂部屋の HP でもリニューアルしてみようかな♪