熟練の手仕事で作り上げる。日本の職人Webサイトまとめ

身近なカトラリーから日本の伝統工芸品まで。
熟練の手仕事で製作されている日本全国の職人たちのサイトをまとめました。

今回取り上げたサイトデザインの多くは、全体的に余白を大きくとり装飾を抑えたシンプルなレイアウトで、その分大きく配置した写真で製作物の美しさを際立てたものになっています。

またコンテンツのひとつひとつが興味深く、それは読みふけっていると時間が経つのも忘れてしまう程。
製作物はもちろん、それを作り出す職人や製造に使う道具、製造行程や現在までの歴史など…お時間あるときに、ぜひ隅から隅までご覧ください。

※以下は2016年5月31日現在の情報です。

無形文化財 鎚起銅器|玉川堂

16
http://www.gyokusendo.com/

新潟県燕市の鎚起銅器製造業。
銅板を金槌で打ち起こしながら形作っていく「鎚起銅器」の国内唯一の産地だそうです。
鎚起でできた鎚目のような背景パターンは時間経過でわずかに色が変化し、鎚起銅器のやわらかな輝きが表現されています。

燕三条 TSUBAMESANJO organic lifestyle creations JAPAN

08

http://www.tsubamesanjo-trade.com/jp/

こちらも同じく新潟から。
古くから「ものづくり」のまちとして金属加工業を営んできた、燕三条の情報発信サイトです。
緑の面と線で区切られたぱきっとしたレイアウトに、現代的なカトラリーがよく映えています。

株式会社昭和洋樽製作所

05

http://www.showayotal.co.jp/

兵庫県のフローリング製作業会社。
創業当初は社名の通り、洋酒用熟成樽の製造をされていて、後にその技術を活かし現在のフローリング業を営むようになったそうです。

角館 伝四郎 DENSHIRO

06

http://denshiro.jp/

秋田県にある樺細工の製造・販売会社のサイト。
樺細工とは山桜の樹皮を使用した伝統工芸品で、風合いが独特で美しいです。
茶筒をはじめお盆や箸置きなど、伝統的なものから現代的なデザインまで様々なバリエーションで製品展開されていました。
ページ内の区切りとして使用されているパララックススクロールに、重なりを強調したシャドウがさりげなく入っていて、ページをめくるような心地よさがあります。

woodpecker

15

http://www.hello-woodpecker.com/

岐阜県の木製品製造・販売メーカー。
まな板・しゃもじなど、木製品を中心に作られています。
トップページの動画は必見。フリーハンドでなめらかに切り出されていくのはまさに職人技で、思わず見入ってしまいました。
白に近いベージュとチャコールグレーの優しい配色や、ぴょこっと飛び出すような楽しいアニメーションで、「人に寄り添う」ような親しみやすいサイトになっています。

SAKUZAN|美濃焼のうつわ 作山窯

04

http://www.sakuzan.co.jp/

岐阜県の陶磁器の窯元。
ロゴの丸いモチーフが所々に配置されていて、サイトの中のワンポイントになっています。
特に製品ページで感じたのですが、全体的にシンプルなレイアウトの中で、写真のトリミング・テキストの置き方などで各ページのコンセプトに合わせた見せ方になっているのがとても勉強になりました。

ヤヱガキ酒造株式会社

10

http://www.yaegaki.co.jp/sake/

兵庫県の酒造メーカー。
白い背景に大きく配置されたタイポグラフィーからはじまり、個性的にトリミングされた写真が印象的なサイトです。


Simplenoteを誰かと共有(ブラウザ版)

blog160530

今日はSimplenoteのノートを共同編集するにはどうするの?というお話です。
Simplenoteってなんだって方は以前に紹介記事書いたので、こちらをどうぞ。

Simplenoteを使ってみてる(Markdownの練習を兼ねて)

GWもすっかり終わって、急に暑い日が続きへばっている5月の終わりです。
GWに行った沖縄研修旅行の様子こちらです。

これまではコーディングがメインだったyasaiですが、最近めっきりディレクション分野のお仕事が増えまして、悪戦苦闘の毎日です。自分でコード書いてサイト作るのも楽しいですが、お客様のご要望をよりよいカタチとして、サイトを使ってご提供すること、自分のこういうものがいいと思ったものをデザイナーと一緒に作っていくっていうのも楽しいですね。

さて、そんな中で僕がメインで使っているアプリケーションもかなり絞られてきました。

  • Brackets(コーディング用)→※案件によってはDWも使いますがだいたいこれ
  • Simplenote(メモ用)
  • Trello(タスク管理)
  • chatwork(連絡ツール)
  • Illustlator、Photoshop

ワイヤーフレームは手書きだったり、イラレ使ったり。サイトマップや提案書もイラレだったりします。
工数と見積もりの細かい計算用にはExcel使いますしね。

まぁいろいろ使ってますが、メインで使うのは上にあげたものですね。
こうして見ると、基本的にWebブラウザの中で済むものが好きみたいです。
そこでやっと本題に入りますが、Simplenoteを使っていて、ノートをだれかと共同編集したいときにはどうすればいいんだろう?というお話です。ここではブラウザ版でのお話です。

ノートを共有する

結論からいくと、とっても簡単なんですが。
タグを入力する欄に、共同編集したい相手のメールアドレスを入力します。これだけ。

メニューから「SHARE」を選ぶと、OKボタンが表示されてクリックしても何も起こらないし、どうするんだろうと調べたのですが、なかなか見つけられず。
できないのかなぁと少しあきらめかけたのですが、よく見たら書いてますね。「OKボタン」の上に・・・

Simplenote.clipular

Add an email address for another Simplenote user as a tag to share a note. You’ll both be able to edit it.

「他のSimplenoteユーザーのメールアドレスをタグとして加えるとノートが共有できるよー
そしたら共同編集できるからね。」

書いてますね。英語は視界から都合よく消去してました。。。
錯覚良くない、よくみるよろし。

ポイントは、

  1. 相手がSimplenoteユーザーであること
  2. 入力するメールアドレスは相手がSimplenoteのアカウントで使っているアドレスであること

です。メールアドレスを入力するのはこちら。

Simplenote.clipular-(2)
間違っても特にエラーとかでないみたいですので、間違って知らない人と共有してしまわないようにしないとですね。この辺りは自己責任でお願いします。

どんな時にノートを共有しているか

例えば参考サイトのリストアップとか、ざっとした構成案のまとめとかですね。
はっきり言って、Excelでもスプレッドシートでもいいんです。Evernoteでもなんでも。
うちのチームの場合はSimplenoteを使っているだけだってことですので。
その中でもメリット考えると、相手がブラウザの前にいることが多いことと、Excelっぽくないインターフェイスですかねー
あのセルがたくさん並んでいる画面が嫌だっていう人も結構いますから。

もともとは僕一人が使ってて、見てほしいものはMarkdownで書いて、URLを共有して見てもらっていたのです。
そのあとに、これは共同編集できたらいいなぁという要望が出まして、というのが経緯です。
だから共同編集の方は後付けで始めたのですが、思ったより簡単で便利でこれはいいぞ、と。
修正したエクセルをいちいちメール共有する必要もないですし、サーバあげたりしなくてもいいですし。
ノート作ったからどんどん書いていってね、で済むので。

コーディングするのもemmet使って、sass使って、gulp使って。どんどん作業的な部分は自動化していますよね。
今回のは自動化するっていうことではないですけど、根本的なところは一緒で、まじめな表現すれば不必要な工数を減らすとか、状況の見える化・視覚化、とか、そういう表現になりますけど、
つまるところ、「もっと楽したいなぁ」っていうのが根底にあって、こういうところで楽した分、考えなきゃいけないことに時間を使えたり、リアルなコミュニケーションに時間を使えたりするんじゃないかな、と。
それから、チームの中で共有のUIで作業した方がやっぱり効率はいいな、って思います。
今回は簡単ですけどこの辺で。


研修旅行 報告!!

飛行機から1歩出た瞬間から、身に覚えのある気温と独特の湿度のおかげで「沖縄に来たんだ」と実感しながら預けた荷物を受け取り外へ。
沖縄の抜けるような青空と日差しに、数時間前まで肌寒い新潟に慣れていた体が驚いてるのを感じながら”ゆいレール”に乗ってホテルへ。
今回の研修旅行では、沖縄の”端から端まで”行き、歴史や文化を体験する事が目的で、
普通の旅行では行く事が稀な『沖縄最北端の辺戸岬』から南は『ひめゆりの塔』、『平和記念公園』まで、4日間と限られた日数ですが体感させて頂きました。

※Safariで写真が表示されない場合は下記の手順で『WebGLを有効』にして下さい。
(1)safari→環境設定→詳細→『メニューバーに”開発”メニューを表示』にチェックを入れる。
(2)メニューバーに表示された『開発』のメニューからwebGLを有効にする。

1日目

初日は、なんと言っても首里城。
首里城の形状、色使い。その周りにある円鑑池の佇まいに文化や感覚の違いを感じる事ができました。

2日目

二度目となる『美ら海水族館』。
メインの巨大水槽でゆったりと泳ぐ巨大なジンベイザメは見入ってしまって、時間の経つのを忘れてしまいそうです。
その一角に、食い込むかたちの観覧席があり、そのジンベイザメを見上げて見る事ができます。

天候に恵まれた『古宇利ビーチ』。
その砂浜は珊瑚が砕かれ細かくなった物だそうで、その細かくなる前のサンゴも棒状の物や枝分かれした物なども混ざっていました。ガイドの方によると色付けして箸置きなどにする人がいるそうですが、その珊瑚どうしがぶつかると小気味の良い金属のような音がするので、いくつか紐で吊るしてウィンドベルにしても良い感じ。
古宇利大橋もビーチからも見応えがあります。

3日目

朝からの晴天。
こちらも再びの万座毛。沖縄の海は天気しだいで色が変わると言われる通り、晴天の海は以前来た時よりも澄んでキレイなブルーやエメラルドグリーンで染まっていました。
ゾウに見える岩は以前来た時よりも浸食が進んでいた気がしますが…どうなんでしょう。

この日。日曜日は国際通りが午後から18時まで歩行者天国(歩行者優先のトランジットモール)と言う事で、車道から一枚。
観光としての国際通りですが、店の看板、色使いなどなど町並みだけでも違いと言う物が見えてきます。

4日目

最終日となる四日目。
平和記念公園、ひめゆりの塔へ。
再び訪れましたが、胸を締め付けられる思いがします。

全四日間、ガイドさんが言っていましたが『一度も雨に打たれずに観光できるのは本当に珍しい』との事。
移動中は雨に若干降られたりしましたが目的地に着くと『晴天』と言う不思議な天気で、本当に『おかげさま』でイロイロな文化、自然に触れる事ができました。
そして、また新たに興味を持っ事も個人的にはできました。

こういった経験をさせて頂ける研修旅行に行かせて頂いた事に
心から感謝します。

この記事の写真は全て弊社で撮影・掲載をしております。
普通の写真では『表現できない』『伝わりづらい』、そんな時に360度撮影をお勧めさせて頂いています。
撮影の際は三脚等で設置し撮影をしますので雰囲気を損なう事が少ない状態で掲載ができます。
お困りの際は、ぜひお声がけ下さい。

Google Analyticsで時間毎のアクセス数を見る。

先日、弊社管理サイトのサーバーを変更することになり、移転タイミングを決めるため、なるべく訪問者数を少ない時間を調べることになりました。
たしか、Google Analyticsでは標準で、時間別のアクセス数をグラフで見られたはず、と思っていたのですが、無いです。バージョンアップの際に消えたらしいです。しかも結構昔に。

単純にユーザーサマリーで「時間別」を選ぶと↓のようになります。

20160515ga00

今回は「何時のアクセスが1番少ないか?」を知りたいので、これでは用を為しません。
(CSVを落として、集計すればわかりますが、もっと手っ取り早く知りたい。)
そこで、時間別の数字を見るには、カスタムレポートを使います。20160515ga01
上部メニューから「カスタム」のリンク→「新しいカスタムレポート」のボタンを押す。

20160515ga02
各項目を埋めていきます。
・タイトル … 任意です。適当に分かりやすい名前を。
・レポートタブ名前 … 任意です。ここも分かりやすい名前を。
・指標グループ … 「ページ別訪問数」を選択。
・ディメンションの詳細 … 「時」を選択。
・ビュー … 複数のビューを設定している場合には、目的の物を選択。

「保存」を押して、実際にレポートを見てみましょう。

20160515ga03無事0時~24時の時間毎の訪問者数が「ぱっと見で」わかるようになりました。
例では、午前4時が最も少なくなる時間帯で、何かやるに箱の前後が好都合、と言うことになります。

何らかの理由で、閲覧者の多いサイトを一時的にでも止めなくてはならない時や、逆にアクセスが多い時を狙って新規コンテンツをアップするなどの判断に使える基本的なデータになります。