a-blog cms Advent Calendar 2016の18日目の記事になります。

a-blog cmsは、HTMLとCSSのみでも管理画面を簡単に変更できます(a-blog cmsのイイところの一つです)。

そこで「a-blog cmsの管理画面がもうちょっとこうなってたらいいな...!」という思いのもと、管理画面のUIをカスタマイズしてみました。

手始めに「エントリーの一覧画面」をやってみます。
カスタマイズの方針としては

  • 「エントリーの管理」という画面の役割を優先し、省けるところは省く
  • 既存の見栄えを大きく変えない
  • 他の管理画面も崩れないように気をつける

これだけです。

さっそくですが、変更前と変更後の画面をご覧ください。


変更前

before.png
変更後

after.png


全体の背景を薄グレーに、要素が入る部分を背景白にしました。
あとは、あまり積極的にではありませんが、各ボタンのラベルを調整したりしてます。


変更したファイルは、2ファイルのみです。

html : themes/system/admin/entry/index.html (ファイル内にJavaScriptの記述有り)
css : themes/system/css/acms-system.css

ダウンロードはこちら

上書きしていただければ、すぐに使えると思います。
(バックアップは各自お願いします。)

書くこと

2016.05.06

少し(といっても、2週間ほど...)前に、東京で CSS Nite LP45「ライティング・スキル強化デー」 というセミナーイベントに参加してきました。 期間が空いてしまったのですが、その所感をまとめてみます。

日々の仕事の中で文章を書くシーンの多さ

私自身、Webサイトを作ることを生業としているのですが、仕事の中で、文章を書いて相手に意図を説明するというシーンはとても多く、粒度も細かいと感じています。

まず、Webサイトを作っていく上で必要な文章は、大きく分類すると、Webサイト上に掲載される文章と、それ以外の文章があります。

Webサイト上に掲載される文章

  • サイト全体のキャッチコピー
  • ページのタイトル
  • ページのキャッチコピー
  • 文章の見出し
  • 文章本文
  • 写真のキャプション
  • 写真の著作表記
  • 画像内にふくめる文字
  • 画像に含めない文字

Webサイトに掲載されない、それ以外の文章

  • クライアント(依頼主)とのやり取り時の文章(主にメール)
  • デザインの意図を説明する文章
  • サイトマップや設計書を説明する文章
  • 制作スタッフに指示をするときの文章
  • 仕様書や要件定義書に用いる文章
  • HTMLのコメント

とまあ、挙げればキリがないのですが、どれにも共通して当てはまることは、読んでもらう相手に、素早く正確に、かつ印象的に理解してもえるように工夫することが大切だということです。これがとても難しくて、奥深い。この奥深さは、文章のライティングだけでなく、デザインにも共通する点があると思っています。

話を戻しますが、文章を書くときに気をつけなければならないことを、自分なりに3つほど、整理しました。

1.読み手の感情に合わせる

例えばキャッチボールでは、ボールを受け取った自分が、次に相手に投げ返すときに「さて、どのコースだったら相手はキャッチしやすいかな?」と考えると思います。言い換えると「情報をどのように投げたら、気持ちよくキャッチしてもらえるか」ということなんですが、これをある程度考えられるようになれさえすれば、あとはそれを考慮に入れて文章を組み立てることに注力すればいいと思っています。

組み立てるのが難しいと感じる場合もありますが、相手が欲しい情報を強調したり、邪魔になる修飾語を取り除いたり、客観的になって読み返してみると、余計なものがヘドロのように付着していることがあります。余計なものをキレイにするには、一旦頭を切り替える必要があり、客観的に自分の文章を見直すには、すこし時間を置いた方がいいです。CSS Niteの千貫 りこさんのセッションでは「塩抜き」というキーワードで語られていて、この「余計なもの削ぎ落とす」ことこそが、文章を洗練させます。

2.余計なものを削ぎ落とす

文章が出来上がった後、私が必ずやることは「この文章で要らない言葉はあるか?」ということをジャッジすることです。私自身、とくに語彙が豊富ではないので、伝えたいことを真っ正直に伝えようとしたら、無駄に言葉が多くなったり、単調な言葉遣いになりがちです。伝わりやすいように工夫したことが、実は逆効果で、余計なものがへばりついた文章が出来上がってしまいます。そのへん、スマートに変えなければなりません。

3.文字の隠された役割を利用する

隠された、というと大げさですが、「文字」は、言葉の意味以上に多様な解釈を私たちに与えてくれます。 同じ読みであっても、意図を正しく伝えるときは、それを漢字にするか平仮名にする(開く)か、カタカナにするか英数字を用いるか、しっかり選択をしなければならないです。

例えば、 「あなたが今日食べたいのは、寿司、すし、スシ、SUSHI、どれですか?」 という質問を文章で書き起こすと、「すし」は「すし」でも、どのような「すし」を希望しているか、というニュアンスに変わると思います。

日本語は、バリエーションに富んでいるので、楽しいですし、思いやりをもつことで、質問したい本当のことを、どの文字を使用するかで選べる環境にあると言えます。

KDDIの高幡さんのセッションでは、見出しキャッチを考えるときに、まずは名詞を抽出するという手法を解説されていました。基本になる名詞から、表現を変えて、さらに限定的に成形していくと、より尖ったキャッチができるという仕組みです。とても腑に落ちる部分が多く、スッと内容が入ってきました。

剣豪で有名な宮本武蔵も、環境によって、槍や鉄砲など武器を変えて戦っていたそうです。(最近テレビで流し見したことなので、間違ってたらすみません。)攻撃する場所や時間、相手の装備によって、武器を正しく選択することは、文章を書くときに正しい言葉を選択することと、似ています。理解しやすい文章を書けるように、日々目と耳を凝らしておくことが重要だなと、これがわたしがセッション全体を通じて感じたことです。


懇親会にて

本編終了後の懇親会では、思いがけず、素晴らしい出会いがたくさんありました!本を書くときのアレコレや、デザインのこと、フラットな場で著名な方々と語り合えうことができました。最高のひとときです。

20160423_lp45_0827.jpg

(撮影:飯田昌之)

ラーメン Advent Calendar 2015
http://www.adventar.org/calendars/722
この記事はラーメンアドベントカレンダー2015の3日目の記事です。初参加。

====

私は納豆とかチーズとか、いわゆる「くさい食べ物」が好きなのですが、ラーメンも例に漏れず、独特な味付けのものが好みだったりします。

今回、札幌でおすすめのラーメンを紹介するにあたり、ただ紹介するのも面白くないので「薬味が特徴的なラーメン」をピックアップしてみます。


(1)ネギ

IMG_0744.JPG

山盛りネギの「喜来登」のみそラーメンです。

ネギ自体はとてもさっぱりしていて柔らかめ、シャキシャキ感が楽しめます。
スープも独特で、下に濃い味が溜まっているので、ぐっとすくいだして、ネギと一緒に食べるのが美味しく食べるポイントです。初めてでも、ちゃんと店員さんが説明してくれるので安心です。札幌では有名な狸小路の6丁目にあって、アクセスもまあまあです。

喜来登
北海道札幌市中央区南2条西6丁目3-2 岡田ビル


(2)にんにく

IMG_1727.JPG

いわゆる二郎インスパイア系で、札幌で私が最もフィーチャーしている「シャカリキ」の「味噌・ド・ニンニク」というラーメンです。
期間限定でやっていたもので、通常メニューではありませんのでご注意ください。

これ、一線超えてます。にんにく好きにはたまらないと思います。復活を切実に希望します。

野菜の上には油(意外とさっぱりしている)と、沢山のニンニクチップ。奥に潜むは擦りおろしたニンニク(大量)。下にはグワグワと太い麺。スープも深みがあり、一切妥協されていません。見た目は豪快なのに、味は丁寧です。最近新店舗に移転しましたので、詳しくはお店のTwitterを見るといいと思います。

通常メニューでは「しょうゆ」がおすすめですが、私は「エビ味噌」も好きで、
こんな感じで、ネギをトッピングしても、

IMG_2806.JPG


生姜をトッピングしても

IMG_2894.JPG

いけます。

シャカリキ
北海道札幌市豊平区平岸2条3丁目2-22



(3)生姜

IMG_3092.JPG


「四代目 いちまる 宮の沢店」のしょうがの極味噌らーめんです。
スプーンいっぱいの生姜、圧巻です。心も体もあたたまります。

私はこのラーメンで、風邪をなおしました。

四代目 いちまる 宮の沢店
北海道札幌市西区西町南21-1-20

以上です。それでは、少々早いですが、2016年も美味しいラーメンライフを。

=====

前の記事はこちら

http://mizu.regraphy.com/blog/2015/12/css-nite-after-dark28.html

2015/11/19(木)、CPI x CSS Nite x 優クリエイト「After Dark」(28)「デザインの生死を左右するクリエイティブディレクション」に登壇させていただきました。


テーマは、デザインのクリエイティブディレクション。


CSS Nite in SAPPOROでの李のセッションのブラッシュアップ版と、さらにプラスアルファとして私の「制作の立場で考えるダメ出し対処法」という内容のセッションを加え、さらに増量、1日に2回編成でお伝えしてきました。

追加された私のセッションでは、実際の過去の弊社事例をもとに、私自身がデザインしたものに対してに受けた「リアルダメ出し」に対してどういった考えをもち、どう対処したかを発表しました。

皆さんは、自分がデザインがデザインしたものに対して、
どんなダメ出しを受けたことがありますか?

私がデザインをしていてよく受けるダメ出しには、例えば「色が薄い」とか「わからない」とか結構致命的なことをも多々あります。
ダメ出しを受けたら、「(どうすればいいんだ...)」という言葉をぐっとのみ込んで新しいデザインをするわけですが、ただ闇雲に作業をしているわけではありません。

セッションでは、次のようなことを「制作の立場から」お伝えしました。

  • 「わからない」という言葉にどういった意味があるのか
  • 具体的ではない広い意味合いを持つダメ出しをどう捉えるか
  • インブラウザデザインの落とし穴と、気をつけたい点
  • どういう視点でのダメ出しだったのか

af01.jpg


デザイナーである皆さんも、立場に関係なく、デザインのダメ出しを受けることが、必ずあるはずです。

ただ愚痴を言い合って終わりではなく、ダメ出しを受けても前向きな姿勢で捉え方を変えることで、良好な【ディレクションする - される関係】を築くことができると思っています。

終了後のアンケートの中で、「ディレクションする側のセミナーはよく見るが、される側の話は珍しい」「なかなか他では聞けない内容だった」と、皆さんからご好評をいただきました。

私も一介のデザイナーの身ではありますが、首都圏のデザイナーさんと意見交換ができ、大変貴重な経験となりました!


もし次の機会があったら、ダメ出しを受けた瞬間からリテイクで修正し終わるまでの感情の揺らぎを感情曲線にし、どういう行動をとったか、いわゆるジャーニーマップを作ってみようかと画策中です。

情報デザインフォーラムin函館、2日目です。

函館の十字街に集合後、八幡坂にあるカフェに向かいました。

IMG_0455.jpg


この日から、楽天の脇坂さんも参戦しました。
函館について語る前に、外部からの移住者の受け入れの成功例として、脇坂さんの鎌倉市の話。
鎌倉市では、地方から来た人(地元民以外)をイベント(祭りなど)に積極的に参加するよう促しているとのこと。溶け込みやすい環境が整っているそうです。友人を作る場が充実しているということも、街としての大切な価値です。さて、函館はどうか?という気づきを与えてくれました。

そんな函館、使われていない資源がチラホラと点在していました。たとえば空き家だったり。そんな資源を、最も活用するべきである「若くて活力のある(起業志向のある)人」が、余暇の時間(仕事後や、休日)に「小商い」ができる環境、ビジネスをスムーズに起こせる環境、支援ができる環境が整っていれば良いのではないか、という点に、徐々にフォーカスし始めました。

もう少し具体的に話は進み、函館の資源(観光に関与しなくてもいいもの)を有効活用したいと考えている地元民と繋がるための「サロン(カフェやバー的なもの)」があれば良いのでは、という発想に着地しました。

資源についてもう少し細かく設定しました。オープンデータになっており、インターネットでもアクセス可能。もちろん東京からもアクセス可能であり、遠隔地から予習ができるシステムとなっていること。

また、サロンの中心核となる人物、マスターは日替わりとすること。マスターは万能ではなく、その道のプロであること、曜日ごとに担当するような体制をとること。


昼食は、来々軒というラーメン屋さんで、塩ラーメン!ミネラルを感じました。
IMG_0464.jpg


昼食後、移動して、


旧大黒湯(デザインペース02)に到着しました。元々銭湯だった建物。内装はほぼ銭湯のままで、この中でワークショップの続きです。
IMG_0467.jpgIMG_0473.jpg


それぞれ思い描く函館の未来を、それぞれの手法で可視化し、

IMG_0480.jpgIMG_0481.jpg

全員の共通項を真ん中にピックアップ(クリーム色のポストイット)。

IMG_0507.jpg

この共通項は、最終日のプレゼンテーションに向けた着地点の核ともなります。


ここまで非常にスムーズに。
木村さんにファシリテーターをお願いしてよかったです。さすがです。

この着地点を、立体で表現します。模造紙の上で立方体やポストイット、紙コップなどを用い、函館の地形上で可視化させます。

まずは模造紙に、ステージとなる函館の地形を描きます。単純な地図の拡大ではなく、強調したい箇所を大きくします。

IMG_0508.jpg

立体は、Yahooの瀧さんが過去に作られたものを参考に、作成。

IMG_0488.jpg


函館のあらゆる資産が活用されないまま点在している様子。

IMG_0525.jpg


簡易シナリオ。

IMG_0559.jpg

プレゼンテーション資料づくり。

IMG_0519.jpg

IMG_0555.jpg


もちろん、他のチームも試行錯誤していました。

こちらは教員チーム。
IMG_0509.jpg


学生チームもポストイットをうまく色分けしています。

IMG_0500.jpg

2日目のワークショップ、熱い議論を何度も重ねた結果、私たちのチームは少し余裕をもって終えられました。3日目のプレゼンテーションに参加できなかったことが残念ですが、かなり得られるものが多かったです。少しだけ整理してみます。

<学んだこと>
ここには書ききれない程学びがありました。要点だけまとめておきます。

  • 議論が長引けば長引くほど失敗する。あれもこれも、といった状況を招く危険性がある。
  • 行き詰ったときは手を動かす。ずっと考えていると偏った意見になりがち。手を動かすことで、一つの思考が昇華される。ただし方向性は決めておくこと。
  • 専門分野が異なっても、着地点さえ見えていれば、おのずと結論は一つになる。
  • 優秀なファシリテーターの存在が不可欠。

では、優秀なファシリテーターとは?

  • 場数をふんでいる。
  • 失敗例をもっている。
  • できるだけ多くの客観的なデータをもっている。
  • ワークショップに参加しているメンバーに対して、議論の中心に向けさせるのではなく、全体を俯瞰してみるように促すことができる。


<Webサイト制作の現場に置き換えて考えてみた>

普段の業務でどういったことに活用できそうか整理してみました。

  • 複数人のワークショップで、ポジティブな意見が出づらい時は、問題点を紙に書いて、共通している事象をまとめる。
  • 取材(インタビュー)をするのとしないのとでは何倍も違う。
  • サンプル(被験体)は多い方がいい。
  • 難しい言葉は、一切使う必要はない。例えば「ペルソナ=どんな人が」でいい。


いままでやってきたことは、大きくずれていなかった(間違いではなかった)ことがわかったし、細かい部分も改善すべきポイントが見えた気がした。


2日目、懇親会で締めです。

IMG_0573.jpg

<最後に>

今回のワークショップ、本当に参加してよかったです。何より人に恵まれました。主催の原田先生、チームのみなさん、学生のみんな、本当にありがとうございました。