カテゴリー別アーカイブ: Web

Webサイト全般、特に(X)HTML/CSSや関連情報に関する情報です。

奈良市のサイトがやばいって聞いた

数日前から Twitter の TL で見かけていたブログ記事について。

奈良市公式サイトのパンくずが斜め上を行くヤバさな件 | Seamonkey-Director

あーこれはやばいですねー地元民としては厳しいですねー, と思う前に奈良市のサイトを開いてみました。

URL から気づいたこと

奈良市: http://www.city.nara.lg.jp/www/toppage/0000000000000/APM03000.html

トップページの URL ですが変わった形式でかなり特徴的です。これを見た時にかなり驚きました。続いて私が住む東吾妻町の Web サイトの URL を見てみましょう。

東吾妻町: http://www1.town.higashiagatsuma.gunma.jp/www/toppage/0000000000000/APM03000.html

あっ。これ同じシステムのやつだ!!

ということで, パンくずも同じような状態になっています(ページ数が少ないので奈良市ほどにはなっていない)。ついでに知っているものだと, 東吾妻町と同じ郡内にある草津町も同様です。草津温泉のある草津町です。

草津町: http://www.town.kusatsu.gunma.jp/www/toppage/0000000000000/APM03000.html

尚, 東吾妻町と草津町については 2008 年に作られてからリニューアルはされていない模様なので,デザインが云々等ありますが, マークアップ方法も含めて仕方ないところも結構あるのかなと個人的には思っています。

奈良市のアクセシビリティガイドラインどこ?

地方公共団体のサイトでアクセシビリティ, または JIS X 8341-3 といった話題が出るならすぐ思い浮かぶのは みんなの公共サイト運用モデル ですね。

委託仕様書(PDF) の内容をざっと確認してみたところ, JIS X 8341-3 に関しても言及しているし, ある程度「みんなの公共サイト運用モデル」を意識して作られていることが伺えます。

「みんなの公共サイト運用モデル」ではアクセシビリティ方針を策定し公開するように書かれていますが, 奈良市のサイトを探しても見当たりませんでした。検索結果にも見当たりません。また, 委託仕様書にガイドライン作成に関しても業務の一部として書かれているので, 恐らく文書としては存在しているが公開されていないだけなのかもしれません。

もし奈良市民の方であれば, 委託仕様書に関する業務に関して, 「ガイドラインは存在するのか?」を確認されるといいんじゃないかなと思います。ちなみに, 「みんなの公共サイト運用モデル」に基づくと, アクセシビリティガイドラインは昨年度末までに策定・公開されているらしいです。

※東吾妻町では公開されていません。

ついでに書くと, アクセシビリティガイドラインに基づいた試験結果が見当たらない気がする。気がするだけかもしれない。

まとめ

公共団体のサイトって難しいですね。

東吾妻町のサイトの件については, 町長に直接資料持って会いに行ったり知り合いの議員さんに説明したりしましたが, きちんと改善されること&&改善される見込みが立つことはありませんでした。予算の問題だったり,町の借金の問題だったりもあるので…

ノンデザイナーズ・デザインブック読了

non-designer's design book

この本自体は何年か前に話には聞いていたんですが、あるスライドをよく見かけるようになったので、「そろそろ読んでみよう」ということで購入。

read-a-non-designers-designbook // Speaker Deck

非デザイナ向けの書籍ということで読みやすかったけれど、配色周りがよく分かっていない感じですね。後でもう一度読み直して見ることにします。書籍自体は内容も平易でありながら、読み終わった後に「あー今俺デザインできるわーマジできるわー」といったイメージを持たせてくれました。

最近は、デザインを直接扱うことは少ないのですが、例えばプレゼン用のスライドや送り状辺りから諸々見なおして見たくなりました。

デザイナさんを探しています

実はしばらく一緒にお仕事をしていただけるデザイナさんを探しています。取扱いとしてはwebがほとんどなのですが、HTML/CSSのマークアップも含めご対応できる方だと嬉しいです。できれば近い所で(~東京まで)。

あ、でもうち、git使えないと仕事できないので高崎開催のgitの勉強会来るといいよ!

ワイヤーフレームの製作にPencillのススメ

長らくワイヤーフレームを作るツールに悩んで来ましたが、Pencillを使ったらあんれまぁこりゃ便利じゃないか!という事案が発生しましたので書き殴る次第です。

ワイヤーフレームツールを探して

これまでワイヤーフレーム用のツールを探して、大体こんな遍歴を辿ってきました。

  1. Paint.netでそれっぽく書く
  2. 面倒になって手書き
  3. Photoshopを使う
  4. Cacooを使う
  5. 回線が細いと何かと辛いので手書きに戻る
  6. (Mac環境へ移行)
  7. Photoshop(Mac版)を使う
  8. 面倒になってまた手書きに戻る
  9. Pencillに出会う(イマココ

Mac環境になってから、OmniGraffleを試用してみたりもしました。

単独で作業を行う、またはMacユーザ同士で作業を行うのであれば、OmniGraffleが便利でとても素敵だったのですが、諸般の事情により「できればWin環境でも動くようなものはないか」と思い悩みながら、最終的に手書き(シャープペンと消しゴム)に戻りました。最近はcamiappのB5サイズ(見開きA4タイプ)を愛用していたところ。

そのタイミングでForkwellさんの記事を拝見!

表参道Forkwell別館:「Pencil」を使って行う、皆が幸せになれるペーパープロトタイピング

Pencillについては、Firefox拡張としてリリースされた時に目にはしていたので、いろいろ出来るんだろうなぁ〜程度でスルーしていましたが、記事を読んで「あれ?もしかして使える?」と思い使ってみたところ、便利だった!!

インストールとStencilの追加

Pencillは当初Firefox専用の拡張としてリリースされていたと思いますが、Downloadページに行ってみると、いつの間にやらスタンドアローン版が用意されていました。Mac環境なのでdmgでサクっとインストールします。

起動してメニューを漁ってみると、どうやら作業用のオブジェクト(Stencil?)が追加できるらしいことが分かります。そこで、早速以下のページのものを何も考えずに追加してみました。

Download Stencils – Pencil Project

今のところ、このStencilを追加したのみで、後は自分で作った画像(アイコン、仮ロゴ等)を組み合わせながらワイヤーフレームを作成しています。

どんなものができるのか

そこまで高機能ではありませんが、作業上必要なものはどうにか足りている、といった具合です。作業方法が限定され細かく凝ったことをするには手間がかかる状態なので、ワイヤーフレームを作る作業にはかえって向いている気もします。

例えば、次の画像は5分くらいで作れます。
pencill sample

作業に慣れるにはそこまで時間はかかっていません。Stencilの種類の把握とそれぞれの調整オプション(右クリック)の把握に時間がかかる程度です。少しいじれば慣れます。

不満としては、どういう訳か「削除」のショートカットが用意されていません。最初戸惑いますが、「切取り」にはショートカットが存在するので、そちらで対応すれば問題ありませんでした。

まとめ

長らくワイヤーフレーム用のツールを探してきましたが、対応するプラットフォームの多さと必要な機能とパーツが用意されているので、しばらくはPencillに落ち着きそうです。もう少し使ってみたらStencilの追加方法やもっと早く作業が出来るような方法を考えたいところ。

 

 

Forrst -開発者&デザイナー向け情報共有サービス-

forrst

日本語の紹介ページが見当たらないので、自分で書いてみる流れです。紹介するサービスはForrst。開発者(プログラマー)とデザイナーの為の情報共有サービスです。(読みはフォレストで良いと思う)

サービス内容はサイトTopそのまま。

Forrstはデザイナーや開発者が思いついたコード、スクリーンショットやリンクを仲間たちと共有する場です。

続きを読む

e2esound.comをリニューアルしました

e2esound.com-renewal

1週間前に、e2esound.comをリニューアルしました!!(⇒新しいe2esound.comを見る)

1年少々前に開始した個人事業ですが、プロモーションの部分を見直すという意味でサイトをお仕事用に作り直そうとずっと考えていました。サーバーの移管から始まり、ようやくリニューアルに至りました。制作時間はデザインも含めて3日弱程度かかっています。

リニューアルに向けて

今回のサイト作成で念頭に置いたのは、以下の5ポイントでした。

  1. コアはCodeIgniter(PHPフレームワーク)
  2. 接続速度を最優先し、画像は最小数、最小サイズ
  3. 同様に、JavaScriptの使用は最小に
  4. モダンブラウザへの対応を優先しながら、IE6でも類似したインターフェイスになる設計
  5. IE6への最小工数対応の実施

何よりも速度・速度・速度!!を優先しています。

続きを読む