翠灯舎 | Suitosha Inc. 翠灯舎 Suitosha Inc.

News|新着情報

オフセット印刷勉強会〜3社合同勉強会 デザイナー編レポート〜

2017.11.30

11/17(金)、翠灯舎とアーキテクトタイタンおいかぜ3社による
7回目の合同勉強会~デザイナー編を開催しました。

今回のテーマは「オフセット印刷について」ということで、
京都で面白い印刷をされている修美社の皆様のお話を伺いに行ってきました。

当日のスケジュールは以下の通り

===
1.ご挨拶 ◎常務 山下まさきさん
2.データ入稿から製版までの工程について ◎DTP・製版 主任 永田かずひろさん
3.オフセット印刷の仕組み ◎印刷機オペレーター 山下こうすけさん
4.紙とインキの相性について ◎調色 永田としかずさん
5.質疑応答
===

修美社にての勉強会は座学とワークショップの全2回に分けて開催予定ですが、
今回は座学中心にお話いただきました。

はじめに常務の山下まさきさんにご挨拶いただき、
修美社さんについて紹介していただきました。
おしゃれな印刷物に囲まれたオフィスにデザイナーも興味津々!



次にDTP・製版主任の永田かずひろさんに、
データ入稿から製版までの工程についてのお話をうかがいました。
いろんな資料を使い、データ入稿から製版までの工程を
わかりやすくご説明してくださいました。
専門用語をしっかりメモして、今後の作業に活かします!




次に印刷機オペレーターの山下こうすけさんから、
オフセット印刷の仕組みについてのお話です。
印刷物を見せていただいたり、
目の前で実際使用する印刷液を使った実験を行なっていただいたりして、
オフセット印刷がどんな仕組みで仕上がってくるのかお話いただきました。
気さくなお人柄のおかげで笑顔あふれる時間になりました。






そして最後に調色を専門とされている永田としかずさんに
紙とインキの相性についてお話いただきました。
特色を使ってどこまでお客様の求める色に近づけていくか
というお話は大変興味深かったです。



質疑応答を終えた後は、社内見学をさせていただきました。





データ入稿した後、プロダクトが仕上がってくるまでの工程を見たことがなかったので、
目の前で印刷物が次々に仕上がってくる現場を見学することができ、
とても学びの多い時間になりました。
修美社の皆様ありがとうございました!
次回も楽しみにしています。

今後もよりよい制作物をお客様に届けられるよう
3社社員一同多くの学びを積極的に取り入れていきます。

引き続きブログで報告させていただきますので、
今後とも宜しくお願いします。


P.S.
11/17(金)はエンジニアのもくもく会も同時に開催されました。
「vue.js」をテーマに皆で黙々と、文字通りに取り組みました。
APIを用意して、参加者が取り組みやすいように進行しました。
今回のもくもく会の様子は次回まとめてレポートさせていただきますね。

【採用情報】一緒に働いてくれるエンジニアを募集中です

2017.8.2

こんにちは。土門です。

今回はスタッフ募集のお知らせです。
現在翠灯舎では業務拡大につき、一緒に働いてくださるエンジニアさんを募集しております。

まずは、改めて「翠灯舎ってどんな会社?」というご説明から。
翠灯舎は、Webサイト制作の会社です。
スタッフ合わせて5人という少人数の会社ですが、
プロジェクトマネジャー、ディレクター、デザイナー、エンジニア、ライターと、
企画から制作、運用まで、社内ワンストップで請け負うことができる、少数精鋭の体制をとっています。

お客様のやりたいこと、なりたい形をヒアリングし、そのためにできることを一緒に考え、形にしていく。
小さな会社ならではのこまわりの良さ・対応の早さ・フレンドリーさで、
お客様と一緒の立ち位置でものづくりをすることを大事にしています。

 

 

社内はこんな感じです。
いつも2階で5人わいわいしながらお仕事をしています。
なぜかレコードプレイヤーがあったり、最近Bluetoothのスピーカーを買ったので、音楽を聴く環境もばっちり。
ちなみに5人中3人がバンドマンです。あとの2人は音楽のフリーペーパーを作っています。



1階はミーティングスペース。
こちらでお客様と打ち合わせをしたり、社内ミーティングをしたりします。




奥に見えるのはPマーク。
あまり知られてない(というか、あまりアピールできていない)のですが、プライバシーマークをとっています。
Web制作業務は個人情報を多く取り扱うことがあるので、リスク管理のために社内で管理制度を作り、教育も行っています。
とるのは結構大変なんですよ?




福利厚生で、ごはん食べ放題、みそ汁飲み放題です。
最近フリーヌードル(カップ麺)・フリーウォーター(クリクラ)も追加されました。
おかずだけ持ってきていただけたらあとは何とでもなります。
もはやおかずも要らないくらいです。



マイ器も支給されます。あとおやつタイムにはコーヒーを淹れます。
お察しの通り食べること・飲むことが好きな人間ばかりなので、
おいしいものをよく食べにいってはInstagramに嬉しそうにアップしています。




いかがでしょうか。
翠灯舎の雰囲気、少しは伝わったでしょうか。





それではそろそろ、肝心かなめの募集要項行ってみましょう!
(こちらは専務の佐野です。弊社のエンジニアの長です)

———————————————————————————————————–


〈募集要項〉

【募集職種】
・エンジニア 1名(予定)

【勤務形態】
・正社員(試用期間あり)

【勤務場所】
弊社
〒604-8226 京都府京都市中京区西錦小路町263番地 ナウティカビルディング C102号室
https://goo.gl/maps/9d4yRTtBv932
※在宅不可です。

【勤務時間】
・月~金(日祝休、GW・夏季・年末年始休業あり) 10:00~18:00
・休日:土日祝、GW・夏季・年末年始休業あり、慶弔、有給休暇

【給与】
・毎月末支払
・金額は面談により決定
・交通費全額支給
・昇給:年2回(2年目より)
・賞与:年2回(2年目より)

【業務内容】
・HTML/CSSコーディング
・WordPress/concrete5のオリジナルテーマ・プラグイン・アドオン開発
・他PHP、JavaScriptを使用したアプリケーション開発など

【応募資格】
・20代〜30代くらいの方(男女問いません)
・HTML5 + CSS3でのコーディング実務経験のある方
・PHP、Javascriptを使用したWEB制作の実務経験のある方
・WordPressオリジナルテーマ作成の実務経験のある方
・Excel、Word、Powerpointなどoffice系ソフトの基本的な操作ができる方
・明るく朗らかで健康、基本的なコミュニケーションが取れる方

【こんなスキルのある方を歓迎します】
・concrete5を使ったサイト構築経験のある方
・お客様とのコミュケーション能力
・社外・社内におけるディレクション能力

【採用までの流れ】
書類選考→面接→入社試験→役員面接→内定

【エントリー方法】
履歴書・職務経歴書・ポートフォリオを、下記メールアドレスまでご送付ください。
書類審査通過者には、面接の日時を連絡いたします。
info@suitosha.co.jp(担当:佐野)


—————————————————————————————————

皆様のご応募、首を長くしてお待ちしております!
(首は長くできないので振りました)

土門

遠藤さん、コミュニケーションって何でしょう? 〜3社合同勉強会vol.2「コミュニケーション」編レポート〜

2017.4.16

4/7(金)に、株式会社OVERKASTの遠藤哲生さんを講師にお呼びして、「コミュニケーション」というテーマで勉強会を行いました。

この勉強会は、普段から親交の深い株式会社おいかぜさんと、有限会社アーキテクトタイタンさんとの、合同勉強会の第2回目にあたります。

 

会社の枠をこえて、お互いに興味関心のあるテーマについて学ぼうというこの勉強会。

今回のタイトルは、《Webディレクターのための「チーム内コミュニケーション」と「対クライアントコミュニケーション」の考え方》でしたが、総勢19名の参加者の中には、ディレクター以外にもデザイナーやエンジニアの姿も少なくありませんでした。

 

職種によらず、「コミュニケーション」は普遍的なテーマ。

私自身、翠灯舎ではディレクター兼ライターとして仕事をしておりますが、それぞれにおける細かな悩みや課題はすべて、

「ちゃんと思っていることが伝わっているのかわからない」

というのが、根っこのところで共通しているように思います。

 

遠藤さんご自身も、エンジニアとしてキャリアをスタートし、その後デザインを学び、現在は「エンジニア」「デザイン」「ビジネス」の三者間をつなぐディレクターとして活動されているという経歴の持ち主。

そんな様々な領域の職種を経験されてきた遠藤さんは、どのように「コミュニケーション」を捉え、どのようなことを大事にされているのでしょうか?

今回の勉強会では、コミュニケーションのテクニックではなく、本質から考え直す、とても刺激的な時間となりました。

 

 

【そもそも「コミュニケーション」って何だろう?】

 

「チーム内」「対クライアント」と、タイトルでは「コミュニケーション」について分けて考えていますが、そもそも「コミュニケーション」って何なのでしょうか。

 

「ポストイットに、コミュニケーションとは何か、一文で書いてみてください」

と遠藤さんに言われ、とっさに私が書いたのは「意思疎通」。

英語の授業で習ったcommunicationの日本語訳そのものです。

もっと平易な言葉で言うと「思っていることを互いに伝え合うこと」かなと思いました。

 

遠藤さんいわく、広辞苑にはこのように書かれているそうです。

「人間の間で行われる知覚・感覚・思考の伝達」。

「思考」はわかるけれど、「知覚」「感覚」ってどういうことでしょう……?

 

遠藤さんは、

・人と人との間には、「言葉で通じるもの(内容)」と、「言葉で通じないもの(関係)」のふたつが存在する

・「関係」が「言葉」をつくる

と言いました。

 

ー「すべてのコミュニケーションには、「内容」と「関係」の二面があり、後者は前者を包み込み、そのメタ次元のコミュニケーションをなす」(出典:『コミュニケーション学講義』)

 

それを聞いて私は、「言葉で通じないもの(関係)」のほうを取りこぼしていたなと思いました。

言葉で通じないものというのは、たとえば表情とか、態度とか、仕草とか、声とか、トーンなどです。

なるべく言語化するとか、ドキュメント化するとかばかりに気をとられていましたが、

そういったものにあまり注意を向けていませんでした。

 

確かに、同じ内容を伝えるのでも、自分の家族に伝える場合と、初対面の人に言うのとでは言い方が異なります。

「関係」が異なれば、伝わりやすい「言葉」もおのずと変わってくる

「内容」が「言葉」をつくると思い込んでいた私にとって、それは発想の大転換でした。

 

 

 

【「心理的な安心の場」をつくるために】

 

Googleでは、どうしたらチームのパフォーマンスが上がるのかの研究がなされていて、そのキーワードとして「心理的安全性」が挙げられているそうです。

それは、みんなが「あいつ無能だなーとか思われたらどうしよう」とか「こんなことして怒られたらどうしよう」などといった不安をもたずに、のびのび、リラックスして発言・行動できる状態とのこと。

 

遠藤さんは、そんな「心理的な安心を生む場」をつくるために、コミュニケーションにおいて大事にしていることのひとつに、

「HRT」(出典:『Team Geek』

ということを挙げていました。

 

HRTとは、Humility(謙虚)、Respect(尊敬)、Trust(信頼)の頭文字。

お話を聞きながら、この3つはそれぞれベクトルが違えど、すべて繋がっているように思いました。

自分は発展途上であると自覚することで、人は学んだり、誰かと力を合わせようとしますし(謙虚)、

他者のこれまでの仕事をきちんと評価することで、その人を大事に扱えるようになり(尊敬)、

その人を信じて頼ろうと決めることで、仕事が増え、広がり、チームが機能します(信頼)。

 

謙虚と卑屈、尊敬と劣等感、信頼と丸投げは似て非なるものですが、

それらの違いは、建設的かどうか、次に繋げられているかどうか、ということなのではと思いました。

失敗やうまくいかないことばかりに目を向けるのではなくて、「ではどうしたらうまくいくだろう?」と前向きになることが、「心理的な安心を生む場」を構成するひとつの要素になるのではないでしょうか。

 

 

【みんなの課題について話してみよう】

 

この勉強会の前に、参加者全員に

・コミュニケーションにおいて課題だと思うこと

・コミュニケーションにおいて工夫していること

について聞きとりをしていました。

 

各自が感じる課題にもいろいろあり、例えば

 

・伝えたつもりが、ちゃんと伝わってないことが多い。認識のずれがある。

・チームメンバーやクライアントの事情がよくわからない。

・誰が何をやるのかはっきりできていない。

・相手となかなか打ち解けられない。

・怒る人がいるとやりにくい。

などなど。

それを見ながら(あ、みんな同じようなことで悩んでいるんだな……)とちょっとほっとしました。

 

また工夫していることには、

・タスクとスケジュールを明確にする

・ドキュメントを作る

・相手のスキルを尊重する

・仕事以外の話を積極的にしてカジュアルな雰囲気をつくる

・ビビらずに意見を言う

などが挙がっていました。

 

 

さてここからは、ざっくばらんにディスカッションタイム。

遠藤さんに対して質問を投げかけたり、今まさに悩んでいることを具体的に話したり。

遠藤さんからはそれぞれに回答がありましたが、そのどれもが

関係を育てていくこと

に帰結するように思いました。

まずは「心理的な安心」を土台にもった関係を育むこと。

その「関係」が言葉をつくり、「内容」を伝え、ひいては密度の高いコミュニケーションをつくっていきます。

「内容」だけに着目するのではなく、まずは「内容」を囲んでいる「関係」に目を向けることの大事さを感じました。

 

 

【では、来週からどんなことができるだろう?】

 

 

遠藤さんの講義、そしてみんなの課題や工夫していることを共有した2時間。

最後に「では、来週から何をやろうと思いますか?」ということで、その答えを、各自ポストイットに書き出しました。

 

そのポストイットをグルーピングし、共感できるものにシールで投票します。

 

チーム内コミュニケーションで多かったのは

・HRT

・あたらしいメンバーと仕事をしてみる

の2点。

ちなみに私もHRTに一票!

HRTを意識することで、あたらしいメンバーとの仕事は自然と生まれていきそうです。

 

 

そして対クライアントコミュニケーションで多かったのは、

 ・多角的な提案をして、本音を探る

 ・時々叱る(当事者意識とプロ意識をもって、ビビらずに意見を言う)

の2点でした。

 

こちらは、「本音」と「ビビらない」がキーワード。

当事者意識をもって、きちんと意見を言い、フィードバックを得る、というプロセス、あるいはそういったことができる「関係」づくりに、みんなの関心が集まったようです。

 

 

【コミュニケーションは、「生む」のではなく、「すでに在る」もの】

 

 

最後に、遠藤さんが「コミュニケーション」は「オーケストラに入ること」だという言葉を教えてくださいました。(出典:『コミュニケーション学講義』)

今目の前にあるオーケストラに入って、他者とノリ(関係)を合わせて、自分の音(言葉)をつくりだすこと。

 

この日に学んだ「関係が言葉をつくり、つないでいく」という考え方は、これからも忘れずにいたいです。

 

 

その後、三社と遠藤さんで交流会を行いました。

食事には、おいかぜさんの近くのNOTTA CAFEさんのオープンサンド!

普段なかなか話せない方とも交流することができ、楽しい時間になりました。

 

 

コミュニケーションの根幹から考える、とても刺激的な勉強会でした。

ここで学んだことを、毎日の仕事に活かしていきたいです。

 

遠藤さん、本当にありがとうございました!

(土門蘭)

 

【 concrete5 Japan Advent Calendar 2016】page_listブロックとGoogle Maps APIでイベントマップを作るぞい!

2016.12.22

この記事は concrete5 Japan Advent Calendar 2016 の21日目の記事でございます。
昨日はfujigoco2255さんの「concrete5の導入事例をインフォグラフィックにしてみた」でしたね。
マーケターさん目線での非常にためになる記事でした。しびれる記事。読むべし!

 

はい、concrete5並びにそこに携わる皆さんには今年も大変お世話になりました。

飲みに行ったり、エバンジェリストになったり、飲みに行ったり、こないだ京都の皆でconcrete5の日を開催したり、飲みに行ったりとか色々なことがありました。

 

来年もたくさん飲みに行きましょう!

 

去年はconcrete5の思い出的な記事を書いたので今年はちょっとだけ技術tips的なことを。

 

「ページリストブロック + Google Maps APIをカスタマイズしてイベントマップを作る」をやります。

※concrete5中級者?向け記事かと
※ホントはパッケージからページタイプ・ページ属性を登録して〜とかやりたかったんですが、
いかんせん師走につきブロックのカスタマイズのところだけ駆け足で行きます!

 

 

【こんなことします】

 

イベント告知ページを作ってページ属性に緯度・経度を登録してイベント一覧ページにpage_listブロックを設置。イベントリストを表示。
ページリストを使って出力されたイベントリストの上部に登録したイベント開催場所が全部表示されたGoogle Mapを出力する。

 

 

【必要なもの】

 

・concrete5
・Google Maps APIのAPIキー(←取得しといてね)
・concrete5のブロックカスタマイズに関する少しの知識

 

※APIキーの取得手順についてはこちらがわかりやすいです。
『Google Maps の APIキー を簡単に取得する』
https://nendeb.com/276

 

 

まずは一覧表示ページを作ってページリストを設置しておきます。
「場所」は「ここのページ以下の階層」を指定して、このページの配下にイベント情報を投稿していきましょう。

 

 

続いてページ属性を用意します。
「テキスト」タイプで緯度・経度の登録用項目を用意します。

 

 

下準備として、先ほど登録した一覧表示ページ配下に適当な緯度・経度データを入れたページを追加しておきます。

 

 

続いてテンプレートのカスタマイズ準備です。

 



/concrete/blocks/page_list/controller.php
/application/blocks/page_list/controller.php へコピー。

 


viewテンプレートとして

 


/application/blocks/page_list/view.php
/application/blocks/page_list/templates/event_map/view.php へコピー

 

しておきましょう。

 

/application/blocks/page_list/controller.phpのカスタマイズを進めます。
まずはお作法通りファイル冒頭のnamespaceを書き換え。

 

 

このタイミングでカスタムテンプレートが選択できるようになるので
先ほど設置したブロックにカスタムテンプレートを設定しておきます。

 

 

続いてマップの表示に必要なjsライブラリを読み込ませます。
class Controller の末尾にこちらを追加。

 

マップ出力に必要なjQueryとunderscore.jsを読み込ませます。

さらにGoogle Maps API読み込みもここで設定。取得済みのAPIキーを入力します。

 

※underscore使わなくてもできますが、コアに登録されてるjsはconcrete5の処理を通すことで自由に呼び出して且つ重複を気にせず扱えますよーアピールで。
※ホントはAPIキーをブロックの登録時にconfigとかに保存する方が良いと思います。google mapブロックのcontrollerが参考になります。

 

ページリストが1ページ内に複数設置されることも想定して、
設置されたブロックごとにマップ関連の機能が利用できるような判定材料を入れます。

 

viewメソッドにこちらを追加。

 

 

これで生成される文字列をviewテンプレート内の処理でIDの一部として扱います。


続いてviewテンプレートのカスタマイズへ。

 

/application/blocks/page_list/templates/event_map/view.php
6行目に追加

マップの緯度経度を格納する配列を設定しておきます。

 

/application/blocks/page_list/templates/event_map/view.php
8行目に追加

マップ表示用の要素を設置します。
$unique_identifier込みでidを振って同じページに同ブロック同テンプレートが複数設置される場合にも対応します。(後述のjs処理も同様)

 

続いてforeachでページデータを出力する流れでマップ表示用のデータを作っていきます。

 

/application/blocks/page_list/templates/event_map/view.php
141行目に追加

ページタイトルとページURLはページリストの処理から拝借します。
ページ属性から緯度・経度も取得して配列にまとめます。

 

さ、準備は万端。マップの出力処理です。

 

/application/blocks/page_list/templates/event_map/view.php
末尾に追加

 

ポイントはこのあたり。

ページリストの処理に乗っかって作ったマップ表示用データをjsonに変換してます。

このjsonをunderscoreの_.eachで回してマップにピンを立てていきます。


※マップ出力についての説明は割愛します。今回は最低限の設定のみで。

 

完成品はこちら。

 

http://suitosha.co.jp/temporary/c5sample/events

 

登録したページの緯度経度に応じてマップにピンが追加されてます。
マーカーをクリックして詳細ページへのリンク付き吹き出しを出す処理も追加してます。

 

コードの全容は取り急ぎこちらからどうぞ!

 

page_listブロックをカスタマイズしてページ属性で登録された緯度・経度からGoogle Mapにピンを立てるサンプル

 

超駆け足でしたがブロックの処理にちょっと工夫するだけで便利な機能作れまっせ〜ということです!
concrete5はブロック側のphpからjsへの橋渡しをし易くする機能がそこかしこに用意されているので嬉しいです。

 

最近リリースされたconcrete5 version 8に搭載されているExpress Data Objectsでは
より細か〜いデータの管理がしやすくなるので、
サイトに登録されたデータをjsで面白おかしく加工したりとか考えるとわくわくしますね。

 

しますよね??

 

というわけで来年も公私ともにお世話になりますconcrete5!

 

明日22日は、全国数万人のconcrete5erお待ちかね、
今年数多の登壇で各地に笑いとか笑いとか感動とかを巻き起こした
カリスマデザイナーことDJ Kazu氏の出番です。

 

彗星のごとくconcrete5に現れたWebデザイナーの1年

 

Kazuくん、今年は美味しいお店たくさん教えてくれてありがとう。
個人的にconcrete5 T-shirtsのスウェット版欲しいので是非、来年企画にあげてください。

 

みなさま、師走を頑張って生き延びて!良いお年を〜!

【レポート】777塾@京都_season1_2

2016.11.1

777塾

 

10/27(木)に開催された777企画塾@京都 Season1「リデザインの思考法」の第2回目。
1週間以上あいてしまいましたが、今回のレポートは第1回目のレポートをしていた下川が熱を出して休んでしまったので、社長の田中がお送りしております。

この日はリデザインについてと、「なんだっけカルテ」についての実例を上げての講義でした。

「新しい」とはどういうことなのか?
ただ単に新しくすること、変えることを目的にしたリデザインに意味はあるのか?

うちの会社でもよく「〇〇を新しくしたい」というご依頼をいただくのですが、まず最初の課題として上記のことはよく話し合います。お客様はやはり「変える!新しくしたい!」ということが大前提なわけですし、ゴールがそこに設定されています。でも、そのリニューアルってほんとに必要?どんな風に何が変われば本当に新しくなるの?ということが問題になります。
そういった事をとてもわかりやすい言葉で解決していく事例も踏まえての講義でした。
すぐに業務に活かせるだけにかなり前のめりで聞く私。

30050547784_334ce22939_z

その後は、この3回を通した課題でもある「なんだっけカルテ」のさらに詳しい説明。
福田先生のおにぎりについての「なんだっけカルテ」を見せていただきました。
この「なんだっけカルテ」は、デザインをたくさんの人に届けるためのあと一押し(意味の設計)を作り出すカルテなのだということがよくわかります。

なぜそのデザインが正しいのか?
意味を問うて答えを出す。言語化する。

それが大切だとわかっていても中々うまく組み立てられないものなんですが(特に私はデザイナー上がりなのでつい感覚的に物事を動かしがちです)、なんだっけカルテを使うとできちゃうんですよね。ほんとにすごい。

30565331582_b6250f2e48_z

と言うわけで、昨日(11/6)が課題の提出日でした。なんとかどうにか提出したけど、どうなるかなー。一人じゃやっぱりおもしろいアイデアってなかなか出なくて難しかったです。
でも何の責任もなく、実現可能かどうかもそんなに気にせず、浮かんだアイデアをとにかく好き勝手に話し続けるという作業がめちゃめちゃ好きなのでとにかく楽しかった。

さて、今週木曜日(11/10)がいよいよ最後の講義です!頑張るぞー。

text by 田中郁后

Offer to Us

to Top Page

Contact

Contact