designudge
vol.122

2016-2-01 自治体Webデザイントレンドへ

Cover

台湾に行ってきました。

今回のカバーは、台湾にて撮影したものです。

Story Permalink

designudgeを発行している僕は、小さな小さな会社やっていまして、それが毎年12月に決算をむかえます。

決算作業中は、メインPCであるMacBook Pro 13インチ上にて、弥生専用Windowsが立ち上がります。

つまり、メインIDEは弥生会計になるというわけです。

弥生会計先生は、16になって簡単取引入力がすごく便利になったと思います。

自分で決算処理と申告するのを3回くらいやってようやくいろいろわかってきた感があります。

会社経営者やったことあったといっても、全部丸投げ状態だったからほとんどわかってなかったのだ。

台湾に行ってきました。次回、台湾に出張にいくことになったときのいろいろTipsを書いてみようと思います。

ちなみに、今回のカバーは、台湾にて撮影したものです。

行天宮というところで、中ではおみくじをすることが出来ます。

日本のおみくじと違って無料とのことです。

僕のときは何故かおみくじの棒がまったくなくなってしまったので、できませんでした。

自治体Webデザイントレンドこぼれ話 : ここだよマップ

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

その中に自治体デザイントレンドというコーナーがありまして、2009年から毎年1700近くある自治体のサイトをクロールしてリサーチしているのですが、そのこぼれ話などをここでお送りしていきます。

Story Permalink

まずは過去の自治体Webデザイントレンドトピックを取り上げていきます

自治体Webデザイントレンドのイベントに向けて、過去に自治体Webサイトのトレンドとして登場した数々のトピックを紹介していきたいと思います。

これから紹介していくトピックは、いずれも過去のCSS Nite Shiftにて取り上げているものです。

ここだよマップというスタイル

他のビジネスサイトになくて、自治体Webサイトに多く取り入れられることになったもののうち、最も著名なものは「ここだよマップ」と呼んでいるスタイルでしょう。

自治体Webサイトは、その性格上、地域色が強いですが、情報発信としては対象地域の人だけでなく、全国すべての人がターゲットとなりえます。

というのも、自治体に関係ある人というのは、居住者だけではなく、地域への移住を検討している人、用事があって訪問する人、観光に来る人、自治体とビジネスをしようと考えている人など様々だからです。

加えて、自治体のある場所というのは、住んでいる人でない限り知らないケースがほとんどと言えます。

例えば、都道府県レベルであれば、だいたいの人は場所を思い浮かべることができるかもしれません。

でも、市町村レベルとなるとどうでしょうか。

市くらいなら、住んでいる県のものくらいは言えるかもしれません。

町や村になってくると、県のどの辺りかはかなり怪しくなってきます。

自治体サイトのサイト名は自治体名であることが多いですが、それを補完するために生まれたのが「ここだよマップ」というスタイルなのです。

「ここだよマップ」はこういうもの

ここだよマップは、自治体の場所を中心に周辺の市町村との関係や、県名などがセットでイラスト化されたものです。(写真は雄武町)

このマップがあるおかげで、あまり知らない自治体であっても県のどこに位置するかを知ることが出来ます。

ユーザにとって便利であることの他に、ビジュアル要素の用意の困る自治体サイトにとって、デザインの遊びを取り入れることができる場所として、数多く導入がされていっています。

2012年頃から普及していき、現在もリニューアルされたサイトに多く搭載されています。

自治体Webサイトは、ある表現が採用されると周辺の自治体にも採用されていくという傾向があるようです。

各自治体は、隣接した自治体を競合サイトとしてウォッチしたりするのでしょう。

ここだよマップも、導入が進むにつれて、より便利な、よりわかりやすいものも増えてきました。

ヘッダー部での採用

ヘッダ部分に「ここだよマップ」が導入されているケースをみかけます。

ヘッダにある自治体名と、場所をまずアピールすることで、どこの話かをユーザに知らせることができます。

例えば、鶴居村のサイトでは、2009年の時点ですでに「ここだよマップ」が導入されていました。

現在は、このサイトでは、サイドエリアへと移動しています。

フッターでの採用

一方、ヘッダではなく、フッターに「ここだよマップ」を採用しているケースもみられます。

奥尻村などがそうです。

フッターに配置する場合、自治体の住所や電話番号、FAXなどお問い合わせと共に掲載するケースが多々あり、ここだよマップはアクセス情報として扱われています。

ヘッダに比べて、ゆとりをもった配置が可能な点もフッターに配置するメリットかもしれません。

メインイメージ、コンテンツエリア、サイドエリアでの採用

上島町は、メインイメージに「ここだよマップ」と、地域の紹介を取り入れた珍しいスタイルです。

また、「アクセス」というバナーにも、ほんのりと地図を入れている点も、バナーを押した先にあるコンテンツを想像することが出来、良いと思います。

サイドエリアへの配置は、近年採用が進む配置箇所です。冒頭取り上げた雄武町もサイドエリアタイプです。

地域を対象としたサイトに採用してもいいかも

「ここだよマップ」は何も自治体だけのものではありません。

特定の地域を対象にしたビジネスや商店のサイトにおいてもきっと威力を発揮するでしょう。

また、素材の乏しいサイトにおいても、キャッチーなビジュアル要素として利用出来るかもしれません。

モダン系のサイトが、Google Mapのカスタマイズを使ったスタイルを採用する一方で、こういったアプローチも親しみやすくて良いのではないでしょうか。

2/24は、自治体Webデザイントレンド

自治体Webデザイントレンドは、2/24に開催されます。ぜひみなさんいらしてください!

descjop で遊ぼう day 16 : Windows版のメニューを表示する

descjop (Electron + Clojure) Advent Calendar 2015 - Adventarの16日目です。

Story Permalink

前々回の記事、

にて書いたメニューをWindows版へも対応させていきます。

結論から書くと、Windows版へのメニュー追加に関しては、前回のコードのままで大丈夫です。

実行すると、Helpメニューのみがメニューとしてあります。

Helpメニューを開くと、About this windows/linux appというメニューと共にショートカットキーとしてCTRL+Hが指定されていることがわかると思います。

これは、Control+Hを指定していたからです。

    [{:label   "Help"
      :submenu [{:label   "About this windows/linux app"
                 :accelerator "Control+H"
                 :click (fn [] (.openExternal Shell "http://descjop.org/"))}]}]

実際コントロールキーとHキーを押してみると、ブラウザが開くのがわかると思います。

Windows版でのビルドを続けてみて思ったこと

今回PowerShellを使ってビルドをしてみたのですが、下記のようなエラーが出ました。

descjopでは、ClojureScriptのビルドを、lein-externslein-cljsbuildを使ってやっていますが、PowerShellだと、JSCPARSEERRORが出ます。

JSC_PARSE_ERROR. Parse error. Character '' (U+FFFD) is not a valid identifier start char

このエラーは、Closure Compilerのエラーで、

This error means that you have tried to compile code that is not syntactically valid JavaScript. Look on the indicated line for typos or other syntax errors that could keep the code from parsing.

JavaScriptをパースしたときに文法が正しくないことを示すエラーであることとのことです。この時表示されているエラーの詳細は、U+FFFDが先頭に出ているみたいな表示があったのでそこでパースがこけたのでしょう。

普通にプロンプトを使ってやってた場合は出なかったので、うちのPCのPowerShell特有の現象だと思われます。

なにか特殊なことをしているかというと、PowerShellの初期設定で、UTF-8のログを正しく表示させるために起動時にchcp 65001を実行してActive code page: 65001となるように設定しているのですが、そのせいかもしれません。

この部分は今後どこかで調査したいと思います。

さて、その副産物で、lein-externs0.1.5が最新であること、lein-cljsbuild1.1.2が最新であることを知ったので、次のバージョンアップ時に反映させようと思います。

2015年の振り返り的な一人レトロスペクティブ

そういえば、まだ2015年の振り返りをマガジンに掲載していませんでした

Story Permalink

あけましておめでとうございます。

今年は年末年始の休日が少ないのか、もう年が明けてしまいました。

2014年は年末にきちんと一年の振り返りをしていたようで、自分のブログを振り返ってみて、ちょっと反省しました。

ということで、2015年振り返りをしつつ、2016年どうしていくかを書いていこうと思います。

1月

2月

3月-4月

  • 細かな仕事などをしつつ、休息期間に割り当てる
  • Greative発のOSSプロダクトであるdescjopの最初のバージョンリリース。ElectronベースのアプリケーションをClojureで作成できるというプロジェクトテンプレート。
  • Webマガジンの復刊に向けての準備

5月

  • Webマガジンdesignudgeをオープン。これは1998年より発行していたメールマガジンDesign Wedgeの後継という位置づけ。Clojure製。

6月

7月

8月

  • designudgeの発行をしつつ、業務などをする日々。

9月

  • Python mini hack-a-thon 夏山合宿 2015 - connpassに参加。様々な刺激をいただく。
  • Clojure/conj 2015への出場申し込みをした。初めての海外カンファレンスへの応募であり、ここに向けて英語学習熱が高まった。本年一番の挑戦だったが、結果は落選。
  • Skype英会話をはじめる

10月-11月

12月

続いて、去年のSSC – Start, Stop, Continueについて振り返り

2015年のStartについて

  • 「もう少し法人としての体制を整える」は、ギョーム的な部分の改善をほんの少しできた気がするというレベル
  • 「新しいプロジェクトに参加予定。Clojureつかうかもです」は、いくつかの仕事で導入してみた。もちろんdesignudgeもClojureベースで構築した
  • 「Design Wedge」は、永年どうにかせねばと思っていたが「designudge」として開始できたのでよしとします

2015年のStopについて

  • 「紙書籍の購入をやめる」は、だいぶkindleに移行できた気がします。ただ、英語学習系の本、経営系の本は紙のほうが読みやすいと感じています。
  • 「iPhoneの利用をやめる」については、今年BlackBerryの再上陸という出来事があり、一部やめはじめた感があります。
  • 「Playもくもく会をやめる」は、特に活動をしなかったためStopは達成できました。

2015年のContinueについて

  • 「ライフワークのデザインクロール&キャプチャ」については、今年はかなり頑張れました。何度も見返し、思索もできたと思います。
  • 「Clojure学習の継続」も十分に行えました。これは、年末のワークショップにおいても再度自分自身学ぶところがありました。
  • 「play-clojureという模索 : 十分に稼働実績があるPlayの仕組みを有効活用できないものかと」は取り組んだものの、結局Clojure単体で作っていくほうが効率がいいことがわかり、ストップした。

以上が2015年の振り返りでした。

ということで、2016年におけるSSC – Start, Stop, Continueを書いていきます。

Start

  • designudgeの更新を計画的に続ける
  • descjopへパワーを注ぐ
  • 海外カンファレンスデビューをする

Stop

  • 新しいことにすぐ取り組むのをやめる(ここしばらく取り組みすぎたので、ちょっと今やってることを大事にしてみる。記事として取り組むとははやると思う)
  • ハード系(ラズパイなどに取り組んでみたものの、ここに注力するのは僕がやるべき本文ではない気配がした、僕はもっとソフトウェアに近いところを頑張るべき)
  • 今まで手動でやっていた経営周りを一つはやめる(つまり自動化する)

Continue

  • クローラ&キャプチャシステムの改良(PlayベースからClojureベースへ作り変えていきたい)
  • Webデザイントレンドに関する思索
  • Skype英会話を続ける

編集後記

Story Permalink

まだ届いてないけど鈴木成一さんの「デザイン室」って本を買ったわけ。鈴木成一さんとは畑が違うものの仕事の姿勢とかすごく感じ入るものがあり。10000冊も手がけているそうで、届いたら選りすぐりな仕事をじっくり見たい。

会計情報をネットにあげて利用することになんかむちゃくちゃ抵抗があってそういうネット系サービス利用してない。なんだろうなこの抵抗感は。

Lisperが変なのか、Lispが変だから使う人が変になるのか、変な人がLispにはまりやすいのか、LispもLisperも変なのか、そもそも変ではないけどバイアス効果なのか

Colophon

編集長
Greative GK. 原一浩 ( kara_d )
製版システム
Clojure / Compojure / Ring / Enlive / markdown-clj / Jetty / MySQL
Share this magazine!
Follow designudge

FREE

Magazine Archives

vol.122

2016-2-01

Cover

台湾に行ってきました。

今回のカバーは、台湾にて撮影したものです。

自治体Webデザイントレンドこぼれ話 : ここだよマップ

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 16 : Windows版のメニューを表示する

2015年の振り返り的な一人レトロスペクティブ

そういえば、まだ2015年の振り返りをマガジンに掲載していませんでした

編集後記

vol.121

2016-1-14

Cover

今回のカバーは、、、UFO?

自治体Webデザイントレンドこぼれ話 : 予告

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 11 : Omのコンポーネントで遊ぼう

descjop で遊ぼう day 12 : Omのコンポーネントで遊ぼうその2

descjop で遊ぼう day 13 : Clojure ワークショップでTAしてきた話

descjop で遊ぼう day 14 : アプリケーションメニューを作ろう

descjop で遊ぼう day 15 : descjop 0.5.3をリリースしました

編集後記

vol.120

2016-1-14

Cover

今回のカバーも、初詣に行ったときのショットです。

descjop で遊ぼう day 6 : Electronがうまくダウンロードできないとき

descjop で遊ぼう day 7 : Hello Worldを出力してみるには

descjop で遊ぼう day 8 : Om basedテンプレートを使ってみる

descjop で遊ぼう day 9 : Om basedテンプレートにボタンをつける

descjop で遊ぼう day 10 : Om basedテンプレートにボタンをつけるその2

編集後記

vol.119

2016-1-10

Cover

今回のカバーは、初詣に行ったときのショット。

「descjop で遊ぼう」について

「descjop で遊ぼう」というのは年末にやったアドベントカレンダーのシリーズなのですが、前段としてまずはその解説をば。

descjop で遊ぼう day 1 : はじめに

descjop で遊ぼう day 2 : 3つのテンプレート

descjop で遊ぼう day 3 : 環境構築をしよう

descjop で遊ぼう day 4 : Helpを見てみよう

descjop で遊ぼう day 5 : デフォルトアプリケーションのビルドと起動

編集後記

vol.118

2015-10-22

Cover

今回のカバーは、Stack Overflow DevDaysのイベントをお手伝いしたときの窓からのショット。

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

ミカヅキClojure : ゼロからはじめるClojure入門第2回

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.117

2015-10-07

Cover

今回は散歩道からのショット

Editor’s Picks

designudgeで扱っている内容に近いジャンルのリソースのうち気になったものなど

U.S. Web Design Standardsを見てみる

今話題となっているU.S. Web Design Standardsの周辺情報など見てみました

Bootstrap 4徹底攻略 (3)

Bootstrap 4のアルファ版がでているので使おう

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.116

2015-9-28

Cover

今回は帰省した際に通った三島からのショットです

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

みそじ過ぎからの英語再学習

40を目前に今までサボっていた英語学習をはじめました

Bootstrap 4徹底攻略 (2)

Bootstrap 4のアルファ版がでているので使おう

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.115

2015-9-13

Cover

前回と同じ開発合宿のショットから一つ

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

開発合宿へ行こう! : Python mini hack-a-thon 夏山合宿 2015

先週末に行ってきた開発合宿について書きました。

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記