ico_gvoice

UIデザイナーがプログラム言語を学ぶ 経験談(二)

前回のUIデザイナーがプログラム言語を学ぶ 経験談(一)から5ヶ月程経ったでしょうか?!真面目に練習を続けていますか?何か困った事は起こりませんでしたか?もしプログラムの学習がすべて順調だったなら、それはあなたに才能がある証拠です。それはさておき、今日は引き続き次のステップに進みたいと思います~今日は比較的『硬い』内容で、しかもより多くの学習コストが必要です。そのため啓発という角度で私のプログラム学習の道のりをお話ししようと思います。

基礎である HTML と CSS をマスターしたら、非常に重要ないくつかのポイントは下記の通りです:

CSSハック
CSS最適化とメンテナンス性(SASS/css sprite/image compression/class name)
CSS Framework(Bootstrap)
バージョン管理(git)

CSSハック

ブラウザをまたぐ際に最初に思いつくのは CSSリセットでしょう。各ブラウザのデフォルトのパラメータをゼロにし、標準化するものです。現在よく目にするCSSリセットには2つあります。1つは世界的に有名なCSSマスターEric A. Meyer が整理したReset CSS、もう1つはCSS Normalizeです。これらの主な違いはHTMLタグの様式がリセットされてゼロに戻るかどうかです(例:h1~h6 の様式)。違いについてはreset cssのさらに別の選択 – normalize.cssをご参照ください。

しかしデフォルトでCSSリセットを読み込んでも、IE はいつも言うことを聞いてくれません。新レイアウトを並べ終える度に、大きな達成感を感じますよ~それでもあの面倒な旧IEを立ち上げると、途端に私のやる気はくじかれてしまうのでした。ホームページの完全度のために、IE ハックは必須です。IEハックのたびに、あなたはそれぞれの各IEの個性を知り、次第に怖いものはなくなります~

IEだけがおかしいのではない場合もありますよ。多くのCSS3属性には、下記のようなブラウザの識別子を追加されることをお勧めします。例:

Chrome / Safari : -webkit- から始まる
Firefox : -moz- から始まる
Opera : -o- から始まる
IE 9/10 :-ms- から始まる(あまり多く用いない)

私はどうやってCSSハックを学んだのでしょう?

非常に簡単で、答えは Googleです!そうです。あなたが直面した問題は、90%以上のデザイナーが直面したものなのです。

では残りの10%以下は?

私自身はHTML構造を修正し、よくある問題を避けるいくつかのCSSの記述法を避けることが多く、通常はこれで解決します。それでも解決できない場合は、フロントエンドエンジニアと話し合い、jsを使って解決することもあります。

私の CSSハックは全て CSS 属性下で直接行い (下記図一)、 HTML 下で注釈する方式のハックではありません(下記図二)。それではCSSハックの順序は?正確な記述法はまず受入の程度が最も広いものから、一層ずつ一番狭いものまで小さくしていきます。つまりブラウザが理解できない行にたどり着くと、その次に移り、理解できるものが出てくるまで続けます。例えば図1のような順序です:

▲直接 CSS 属性の下に書く

▲HTML下に注釈する

そしてブラウザのCSSデバッグは通常ブラウザを直接開いた時に提供される開発者ツールによりエラーを取り除きますが、筆者自身は直接開発者ツールの中で可能なCSS属性を入力し、当初の問題を修正したかどうか画面の変化を観察して、一旦OKとなったら、すぐにエディタを立ち上げて先程の正確なCSSをファイルに入力します。もちろん、開発者ツールでHTMLの構造を修正してみることもできます。

開き方:

Windows:F12
OS X:Cmd ⌘ + Option + I
Safari:Safari > 環境設定 > アドバンスド > メニュー内の『開発』メニューを表示
右クリックで『要素のチェック』 を選択でも開発者ツールを開くことができる  

使い方(chromeを例に、Facebookのログインページを修正してみます):

▲今日は Facebook のログインページで説明  

▲右クリックし、『要素のチェック』または上述のクイックキーを選択  

▲正式名称は『開発者ツール』  

▲開発者ツールの左上にあるルーペを選択  

▲修正したい要素を選択  

▲Facebookヘッダの色を変えてみる(上方で直接色を調整)  

▲さらにヘッダの高さを調整  

▲高さをデフォルトの 82px から 100pxに変更  

▲一連の修正を経て、デザイナーが求めていた画面を素早く表示

CSS最適化とメンテナンス性

あなたがデザイナーであろうとエンジニアであろうと、プログラムの最適化とメンテナンス性はどちらも非常に重要です。プログラムの最適化はホームページにとっては効能を向上させられるものであり、ホームページの UXを間接的に最適化することでもあります。メンテナンス性は連携作業にとって非常に重要です。例えばあなたが今日休暇の場合、同僚Bに引継がれますが、あなたがもし会社のコーディングスタイルに基づくことなく コードを書いていたとすれば、同僚Bは多くの時間を費やしてあなたの書いたプログラムを理解しなければなりません。運が良ければ短時間で理解でき、運が悪ければ1日かかることでしょう。以下で私自身の最適化とメンテナンス性に対する心得を紹介します

CSS最適化

Sassを用いてCSSを作成する際は、変数(Variables)、関数(Mixin)、継承(extend)、ネスト構造(Nesting)によりプログラムの行数を大幅に減らすことができます(重複する内容を減らす)。初めてSassの紹介を見た時は、関数でさえ私を後ずさりさせ、ひどくプログラミングだと感じたものです。でも…覚えてしまえば以前に戻ることはありません。本当に非常に便利で効率も良いのです。Sassの最も優れた機能は変数の運用で、この部分についてはCSSでは不可能です。一度Sassの変数記述法を使うと、今後のホームページのメンテナンスがより手軽になります。見本は次の通り。

▲See the Pen bVReep by jeremy0417 on CodePen.

想像してみてください。このボタンをあなたがメンテナンスしているホームページ上に計30個、さらに各ページに分散させ、Hoverの色を暗くしなければならない。しかも上司はあなたに対し5分後にクライアントにデモするよう求めています。この時あなたは$btnHoverをdarken($btnColor、10%)からlighten($btnColor、8%)に変更するだけでよいのです。模範例は次の通り。

▲See the Pen bVReep by jeremy0417 on CodePen.

さらにワンステップ上がったものが@if, @for, @each, @whileの応用となり、この部分について私は本を読んだことはありませんが、興味がある方はこちらを参考にされるとよいかと思います。
Sass control directives: @if, @for, @each and @while

また、私がSassを学んだプロセスの2つのチャネルは、フロントエンドコミュニティの集まりと、インターネットの教育ドキュメントでした。

フロントエンドコミュニティ:
Front-End Developers Taiwan
台中フロントエンドコミュニティ
高雄フロントエンドコミュニティ

ネットワークリソース:
Sass & Susy 講義マニュアル
Sass公式ドキュメント
mixin library for Sass
sass と css の間の関係(オンライン練習)
Sass Tutorials(オンライン動画講義)

ネットワークリソースは実は非常にたくさんあります。Sassの基本をマスターしたら、関連するsourceコードを検索して書き写してみることをお勧めします。本当に問題に遭遇した時にも、フロントエンドコミュニティの達人たちに聞けばよいのです!デザイナーの皆さんどうか勇気をもって試してみてください。使ったらもう戻れませんから~

残りの1つは画像の処理です。たとえデザイナーであっても、デザイン済の画像をサイズに合わせて個々にカットしてエンジニアに渡すことは難しいことではありません。しかし…カットした画像に圧縮するスペースがあるかどうか知っていますか?その通りです!インターネット上でXX%圧縮してもひずみが生じないと謳うツールが提供されています。例えば、compressor.io(最高90%)、TinyPNG(pngであれば、最低50%以上)等、どれも圧縮のパフォーマンスは良好です。私はtinyPNGをよく使います(jpg,png両方可)。面倒に思う人もいるでしょう。なぜなら画像をカットした際に一度保存し、圧縮後再度保存しなければならないからです。それでも圧縮後のパーセンテージを見ると、非常に達成感があり、知らない間に画像をカットした後の良い習慣–圧縮が身につきました!

▲tinypng 圧縮画像

画像については圧縮だけでなく、もう一つ画像に関連するのがCSSイメージスプライトです。その方法はよく使うサムネイル、アイコンを併せて1枚の画像にするものですが、そのメリットは何でしょうか?サーバサイドについて言うと、ユーザはサーバに1回リクエストするだけでよく、ホームページの速度が自然にかなり速くなります。下記の図はそれぞれpinterestとFacebookのCSSスプライトです。

▲pinterestのCSSスプライト  

▲FacebookのCSSスプライト

CSSスプライトはどのようにして作成するのでしょうか?筆者はphotoshopを使いアイコンを1枚の画像にまとめており、オンラインでも多くの関連サービスがあります。『CSS スプライト』の複数の背景画像をまとめ、ホームページの効能を向上させる講義、あるいはGoogleの関連するCSSスプライトジェネレータを参考にしてください。

ところがCSSスプライトの見本を探していると、多くのホームページも常用のアイコンをアイコンフォントに変えて表示していることに気がつきました。アイコンフォントについてここでは述べませんが、キーワードでググって頂ければ非常にたくさんの関連サービスがありますよ~私はFontAwesomeを使っています。理由はphotoshop/sketchappをサポートしているからです!詳細についてはこちらを参照ください:超効率!アイコンフォントをPhotoshopのホームページデザイン画面で直接使う!

CSSのメンテナンス性

CSSメンテナンス性を話し言葉で言うと、他人が見てプログラムコードとロジックが分かるようにすることです。こうすれば、同僚があなたのCSSファイルを開いて修正する場合に、開発効率上の差異は非常に大きくなります。以下では構造と命名の心得についてお話しします。

まずはファイル構造から始めます。私はSCSSファイルを分割し、それぞれの.scssの機能を独立させます。こうすると、ページのレイアウトUIを調整する必要がある時は、非常に迅速にメンテナンスを実行できます。そのSCSSファイル分割の構造は次の通り:

上記のHTMLは.scssの分類方法であることが分かります(プロジェクトの大きさや個人の好みにより異なる)。筆者が勉強を始めた頃、mixinとstyleの2つのファイルにしか分けていなかった結果、style.scssのファイルの中に800行以上のコードがあるという事態を招いてしまいました(プラットフォームの規模は大体インデックス1個、20ページ以上)。CSSファイル管理テクニックについて共有する話を読んだ時、私のこの方法が、プロジェクト管理において実に友好的でないことを初めて知りました。たとえ私が今多くの時間を使って整理したとしても、今後の管理の上ではより手軽になるのです!そうしてCSSファイル分類のテクニックを研究し始めました。『30日でSass文法をマスター–(18)あなたのSass構造をプランする』、こちらも非常に読む価値があります。最も重要なのは、自分でやってみること。そうして初めてどの観念が分からないのかが分かり、資料を探し出して再度やってみると、観念がより深まるのです!  

▲画像引用元:https://speakerdeck.com/evenwu/css-dang-an-guan-li-ji-qiao-fen-xiang

どうして急にSASSになったりSCSSになったりするんだ、筆者の書き間違いではないかと思っていませんか?実はSASSは2種類の記述法をサポート可能です。SASSはインデントでカッコを代替し、これは全体的に比較的簡潔ですが、最初は慣れるのが容易ではありません。そしてもう一つの記述法はSCSSで、CSSの記述法と似ていますが、カッコを残すため、CSSの記述法を.scssで保存することは許可されているものの、意味はありません(SASSのエッセンスを利用してこそ意味があります:変数、Mixin、extend、ネスト構造)。

もう一つ、メンテナンス性では命名について話します。命名はかねてから最も効率を悪くすると筆者が考えていた部分でした。時には命名を考えることに多くの時間を費やしさらにコーディングの思考も中断されてしまいます。そこで他の人の命名規則を参考、研究するようになりました。以下は私自身の命名構造です:

まずは全体の構造を分割する:header / main / footer
その後機能に応じて命名:banner / nav / container / sidebar
ボックスの幅等を設定する必要がある場合、私は xxxContainerを使います。例:navContainer / mainContainer
要素のグループの場合、私はxxxWrapを使います。例:navWarp
サブ要素:subXxxx、例: subNav / subMenu
よく見かける要素:意味で命名、例: logo / mail / btn

しかもその他の要素に基づき命名する場合は、 “意味で命名”を守り、要素、用途等を明確に表明し、class=”1″,class=”aaa”といった類の意味のない命名方法を避けさえすればよいのです。idとclassの命名方法について、私自身はid=”id_name”class=”className”を使うことが多いです。

いつidを使うのか?いつclassを使うのか?簡単に言うと、CSS様式を目的とするものには全てclassを使用し、さらにこれらの様式は重複して使うことさえ可能です。しかしidはそうはいきません。独立して存在し、重複することはできないのです。そのため“全体構造命名”に見られるか、またはjavaScriptに残しておくことが多いです。

CSS Framework(Bootstrap)

実は筆者は一度だけBootstrapを使いましたが、その後二度と使っていません。使いにくいからではなく、その構造とロジックについて理解した上で、私はやはり自分で作成する方が好きだったのです(すでに自分の構造ロジックがありました)。

私にとってBootstrapとは、理解していることが必須の知識です。なぜなら現在非常に多くの人が使用しているために、あなたがBootstrapの構造を用いて書かれたホームページを修正、メンテナンスする可能性が極めて高いからです。そうすれば、あなたは簡単にコツをつかむことができるでしょう。もう一つの原因はBootstrapの構造原理を理解することにより、自身をCSSに対してより慣れ親しませ、かつあなたのCSSコードをより柔軟にし、効率をアップさせることができます(但し依存しないということを覚えておいてくださいね~)。

既存のCSSフレームワークを使わずに自分でカスタマイズするという選択には欠点があります。あなたは時間を費やしファイルを書かなければなりません~

延長で閲読:
自分で作成しますか、それともCSS FRAMEWORKを使いますか?
Bootstrap RWDの使用方法と原理
Bootstrap CSS中国語ファイル

バージョン管理(git)

gitはUIデザイナーにとっては少しハードルが高いですが、勉強すれば、プログラムの開発と連携がよりスムーズになることでしょう。私自身のgitスキルに対する要求は『チームで連携する』という部分のみです。なぜならもし環境に『文字(プログラムコード)とステップ』がたくさんあり過ぎる場合は、じっくりと見て学べば、難しくはないからです!しかし画像を見ることが好きなデザイナーにとって、ターミナル上にびっしりのプログラムには、目がくらくらしてしまいます。他にもブランチ作成、リリース作成、リベース等、会社なら当然専門のRDたちに引き継ぐのでしょうが、こっそり自分で遊んでみましょう。失敗しても気にしないからです~以下で私の学習プロセスを公開します:

▲画像引用元:コマンドがびっしりのターミナル

step1. エンジニアの友人

まず最初に、あなたが『プログラムコードがびっしり』から抜け出す第一歩を手助けしてくれる、本当に我慢強く教え上手なエンジニアを慎重に選ぶことが必要です。まさに皆さんがよく耳にするこの言葉の通りです:良き師はあなたを天に登らせ、悪き師はあなたを身動きできなくさせる。良き師はあなたに少ない労力で大きな成果を勝ち取らせてくれますよ~私が出会ったエンジニアJasonはgitの独学を始め間もなく1年になりますが、会社での開発も思い通りに事が運ぶということで、初心者に対してより共感していました。

step2. 図解 git 原理

デザイナーがプログラムコードがびっしりの画面に対して想像力をかき立てることは非常に難しく、これらのプログラムを入力した後にPCがどのように実行するのか、どのような連動が起きるのか等を想像するのは更に困難でしょう。これは私にとって、適応のしようがないものです。そのためエンジニアは画像化を使ってgitの運用構造を説明し、全く概念のないデザイナーの心の中に初歩のモデルを持たせようとしました(画像引用元)。

1枚目の画像はgitの運用構造と流れを説明するものです。ちょうどデザイナーが制作するUIフローのようなもので、構造と流れを並べた最も理解しやすいものです。そして2枚目の画像はgitの分散式バージョン管理システムを説明するもので、中心化の特性を取り除き、リモートサーバの負荷を有効に低減し、RDたちの開発環境をより柔軟にします。

▲gitフローモデル  

▲git分散式作業概要図

延長で閲読:  
Pro Git 正体中国語版
サルでも分かるGit入門指南
Gitフロー開発の流れ
Atlassian Git Tutorial

step3.一般的な状況下での流れを覚える

私はエンジニアに頼んでプロジェクトの立ち上げから最終的にプログラムコードをリモートにpushするまでの流れを一度行い(その他の突発的状況は考慮しない)、流れを明確に紙に記録し、さらに各ステップの意味は何なのか、それぞれのプログラムコードの用途は何かを注釈しました。背後にある意味を知ることで記憶と応用がより行い易くなるからです。他にもプログラムコードの字義について、なぜさっきのプログラムには-fがなかったのにこのプログラムにはあるのか?-f の f はどの単語の省略なのか?といった質問をしました。以下は私が当初書いた最も最も最も単純な流れです:

1. git co master
2. git pull
3. git co feature XXXX(RDがブランチを作成した上で、私に直接分割させた)
4. 開発開始
5. git st(どのファイルを修正したのか確認)
6. tig(修正したファイル内容を大まかに素早く閲覧)
7. git add(修正したファイルを追加)
8. git commit(段階ごとに1回コミットし、今回のコミットで何を修正したのか注釈する)
9. 開発続行
10. git st(どのファイル修正したのか確認)
11. tig(修正したファイル内容を大まかに素早く閲覧)
12. git add(修正したファイルを追加)
13. git commit(再度コミットし、ある段階に達したと思えるまでこの3ステップを繰り返したら、コードをリモートにアップしてもよい)
14. git pull –rebase(私自身の習慣で、衝突するのを防ぐ)
15. git push(ローカルで開発したばかりのプログラムコードをリモートの機器にアップする)

step4. 実際の操作

会社の開発プロジェクトの連携に参加し始め(前提はエンジニアがあなたのために環境と権限を設定してくれること)、その後私はstep3の手順に倣って一歩ずつ進めましたが、エンジニアは『pushする前に必ず彼に見せる』ということを特に強調し、彼にチェックしてもらい、問題がなければpushしていました。その理由は新人がdevelopの開発を乱すのを恐れたためです(例:あるプログラムまたはファイルを誤って削除してしまう、プッシュがマージでも解決しない等)。

step5. ミスから学ぶ

実際の操作過程においては、大小様々な問題が次から次へと出てきて、その時はあなたがエンジニアの所へ行き教えてもらう(邪魔する)しかありません。問題の原因と結果を整理して明確化することは、gitを理解する手助けとなります。でも私は優秀ではないので、同じ問題について何度も教えてもらいやっと理解できました。

1回目 – 聞いても理解できない
2回目 – どうやら概ね理解できたものの、実際に座って自分でやろうとすると、やはり理解できない
3回目 – 類似した状況を処理できるようになるが、いつも意外なことが発生する

step6. githubで遊んでみてgithubプロジェクトを作成する

私は最初に会社のgit開発環境に接触したために、githubについてはずっと触れていませんでした。私はgitの精髄を徹底的に理解するために、githubへの挑戦を開始しました。失敗したとしてもお金はかからないし、切り捨ててやり直せばいいのです~githubはデザイナーにgitのテクニックを練習させることができるだけでなく、良好な作品集スペースでもあります(github.io)。デザイナーはHTML/CSS/gitを練習することで、その後作品をgithub.ioに格納すればよく、本当に非常に便利で、スペースが無料でかつ安定しています!また、数人でプロジェクトを立ち上げて、リモートで連携する方法により一緒に開発してみてもいいでしょう。これは進歩が最も早い方法の一つだと思います!

後記

職場でのあなたの位置決めを選択することは非常に重要ですが、新しい分野を学ぶということを決して恐れないでください!自ら学習してこそNOと言う資格があるのです。ではどの程度まで学べばマイルストンと言えるのでしょうか?以下は私が自分で定めたマイルストンです。私が次のステップを選択する時に、迷うことはありませんでした。

1. フロントエンドエンジニアとアートワークについて話をする時に、HTML/CSSの専門用語で彼らと話ができる(この段階でプログラムコードが嫌いでない場合は次へ)
2. HTML/CSSを用いて単独で自分のレイアウトを作成してみる(コードを書く過程がデザインする時と同じようにhighな場合は次へ)
3. 自身のHTML/CSS記述法を最適化し、静的サイトを生成してみる(自身のコードのクオリティに非常に関心があり、新しい書き方を試して比較してみたい場合は次へ)
4. 自身が単独で書いたホームページの中にjQueryをいくつか追加し、ホームページに動的行為を持たせる(jQueryに関する資料を読みたいと思い、パラメータの変更の方法を知っている場合は次へ)
5. git 開発の流れに加わる(gitが本当に便利だと思う場合は次へ)
6. JavaScriptを勉強する(この段階の勉強が比較的順調だった場合は、次のステップでフロントエンドデザイナーとして邁進することを考えてもよいかもしれません)
7. もしあなたがフロントエンドデザイナーを選択したのであれば、技術的にはより多く専門的に研究しなければなりません(私は6.001歩まで行きましたが、苦戦中です)

プログラムの学習結果がどうであろうと、あなたとRDのコミュニケーションはより円滑になるはずです。なぜならあなたはRDの思考の観点からあなたたちの間の争点を取り扱うことができ、そこからさらにデザイナーとエンジニアの双方が受け入れられる提示方法を見つけ出せばよいのですから(但し良いデザインにはこだりが必要なことをお忘れなく)。





作者プロフィール
Design Tongue / Jeremy Lin
Design Tongueは、ユーザーインターフェイス、インタラクションデザイン、ユーザーエクスペリエンス、プロダクトデザインの動向、サービスデザイン等を含む、ユーザーエクスペリエンス関連のテーマに注目するプラットフォームである。より多くの読者にデザイナーたちのたくみな構想を理解させようとし、同時にdesign thinkingという考えを押し広めている。

Read more
2016.09.30

ミレニアム1『ドラゴン・タトゥーの女』

リスベット・サランデルは一匹狼の女ハッカー。幼い頃に精神分裂症と診断されて障がい者となった彼女は、やせ細って肌は青白い。信頼を寄せていた法定後見人が突然脳卒中で倒れ、新たな後見人からいじめと迫害を受けるが、暴力には暴力で立ち向かう姿勢で奮闘し、強く大きな父権制に抵抗していきます。いつもパンキッシュなファッションに身を包み、眉と鼻にピアスをあけ、右肩にはドラゴンのタトゥーのある彼女は、束縛を嫌い反抗しているようでありながらも焼けつくように熱く愛を渇望しているのでした! そして真相を暴く記者のカール・ミカエル・ブルムクヴィストは、企業家のヘンリック・ヴァンゲルの委託を受け、家族の歴史を執筆するとともに、親戚のハリエットが40年に失踪した一連の謎について調査します。ミカエルは情報収集のために凄腕ハッカーであるサランデルを雇います。生死を分ける危機と脅威のもとで、ふたりの間に奇妙な友情が芽生えます。彼らの間にはゴールデンタイムのような男と女の間の恋など全くありません。あるのは、北国の厳しく寒い風景のもとで、スリリングで緊張した雰囲気を隠しつつ織り交ざってできた、思わず息を殺してしまうような、一秒たりとも目を離すことができない緻密なストーリーです。 大きな映画ブームを盛り上げ、H&Mと業界を越えてコラボレーションする。 『ドラゴン・タトゥーの女』は、スウェーデンの作家スティーグ・ラーソン(Stieg Larsson)の推理小説で、2006年には北欧で最も優れた推理小説に贈られるガラスの鍵賞を受賞しています。小説全体がまるでクモの巣のように綿密に構成されており、クライマックスによりもたらされたエンターテイメント性に満ちあふれ、読者を繭から糸を剥がし取り残酷な真相を見つけるよう導いていきます。作者の躍動感がありかつ精彩を放つ文章は、読むのを止めずに分厚い一冊を一晩で読み終えてしまいたいと思わせるほどです。そしてこの非常に人気を集めた小説は映画化されたこともあります。スウェーデン版と有名監督デヴィッド・フィンチャーによるアメリカ版があり、アメリカ版のスタイリストTrish SummervilleはH&Mとコラボレーションしてサランデルのユニセックスなパンクロックファッションをリリースし、大好評を博したこともあるのです!スリリングな推理小説が好きな方と、女性主義の思考をもった新しい女性にオススメで、一旦本を手に取ったら、ラーソンが描く厳しい寒さと凶暴の不思議な世界にどっぷりとハマってしまうことまちがいなしです! 画像引用元:  https://goo.gl/3hefo5  https://goo.gl/64jHfF

ガマコラム ガマニア推薦
2016.09.30

Jollywiz「JSTaiwan」が新たな台湾式アフターヌーンティー:逸品スイーツ-牛軋米餅を発売、共同購入の風潮を引き起こす。

▲夏に別れを告げ、初秋を迎える。やんわりとした涼しさがおいしい知らせを連れてくる。焼きたてのほろ酔いキャラメル色の最もすばらしい瞬間で時間を止め、私たちの午後の時間を舌で記憶する。 他とは違うお米スイーツ、JSTaiwanにあります! 「吉」には「美しい、幸福な」という意味もあります。【JSTaiwan】は真摯な気持ちで台湾のおいしいローカルグルメを発掘し続け、さらには台湾の匠人とコラボレーションし、オリジナリティある地方の特産品を販売してきました。「ブラックパイナップルケーキ」、「果実ごろっとヌガー」、「牛軋米餅」…といった精緻な台湾式アフターヌーンティーにより、台湾の肥沃な土地が生み出した純粋なおいしさをより多くの方に味わって頂けることを願っています。JSTaiwanでは、台湾のおいしい食べ物を見つけることができ、よい事が続き、幸運が舞い込むようにします! 大自然の緑のすがすがしい香りを玄米の香り漂う四角いビスケットの中にとじ込めました。ひと口食べるとサクッと感が口に広がり、そこに柔らかくてクリーミーなヌガーを織り交ぜ、ネギとお米が絶妙に組み合わさります。すばらしいスイーツにおける新たな賢い選択です。 牛軋米餅には大きく「ネギの風味がよい、お米が香る、砂糖が濃厚、ビスケットのサクッと感」という4つの要素があります:【ネギの風味がよい】三星ネギ-本物の素材の香りを引き出し、ひと口食べるだけで口の中に香りが留まります。【お米が香る】五結玄米-食物繊維と栄養素を大量に含んでおり、ビスケットをさらに健康的にするだけでなく、さらにサクッとさせます。【ビスケットのサクッと感】四角いビスケット-全部で54もの層が積み重ねられており、1枚あたり27層の黄金比率になっています。【砂糖が濃厚】ヌガー-口の中で歯にくっつくことがなく、甘くおいしい味わいと濃厚なクリームが忘れられなくなります。 おいしいもの、それは私たちの究極の追求です。発売から1ヶ月足らずで5,000箱以上を売り上げ、非常にご好評頂いています。ネットで共同購入をしているCandyは言います:「試しにと思って食べてみてください。袋を開けるとすぐにかすかなネギの香りがして、サクッと柔らかくて硬くないビスケットと、柔らかいのにしつこくなくさらっとしたクリームをひと口で食べ、そこにかすかなネギの香りが加わると、口全体に言葉では言い表せないような食感に包まれます!でもおいしいのです!」各方面からの反響を受け、JSTaiwanでは絶えず改善と研究開発をし続けるという気持ちを持ち続けてきました。近日中に牛軋米餅の新パッケージのセットを発売予定ですので、どうぞお楽しみに! 購入HP:http://goo.gl/sZKeU2

TW ガマニュース
2016.09.30

2016中秋パーティー、月は丸くガマニアは団結する

今年の中秋パーティーは9/9に淡水の八里雷朗極限探索園で開催されました。夕方の大雨により進行のペースは乱れたものの、ガマニア人の興味が薄れることはなく、相変わらずのアツさでした。それでは『G!VOICE』とともにすばらしいこぼれ話を振り返りましょう! 大型泡プール 夢か幻のようでもあり非常に涼しい もうすぐ秋とはいえ、まだ焼けるように暑い日が続いています。会場に大型の泡のプールが搬入されると、白く細かい泡はまるで神秘的な魔力を持っているかのように大人と子供を引きつけ、プールの中で一緒に楽しみました。新しいだけでなく非常に涼しいものでした。 ▲泡のプールでは大人も子供も思い切り楽しんだ 主催者は今年も同じく参加者のために非凡でおもしろい一連のイベントを準備しました。今年のメインの戦場といえばもちろん泡のプールでしょう。ガマニア人たちは家族と一緒にチームを作り、賞金は二の次で、チームの勝利のために戦いました。遊ぶことに関しては常にまじめであり続けてきたガマニア人は、たとえロマンチックな泡のプールであっても絶対に手を抜くことなく、全力で立ち向かいました! ▲フラフープリレーは濡れて滑る泡のプールの中ではより困難に ポケモンが登場 イベントはクライマックスに この他にも、最近「アイテムゲット」ゲームが大人子供を問わず流行していることから、主催者は「ポケモンを捕まえろ」イベントを準備。福利厚生委員のスタッフがポケモンのキャラクターに扮して登場して歌とダンスを披露すると、多くの人々の視線を引きつけました。 ▲長い間みんなが待ち続けていたポケモンの登場でイベントはクライマックスに 毎年中秋パーティーではたくさんの飲み物とごちそうが供されます。家族や同僚と心を尽くして共に楽しむ。この中秋という美しい季節に祝福を捧げ、月を観るだけでなく、さらに重要なのはみんなが一緒に集まり、下半期のために共に激励することなのです。最後にはきらびやかで美しい花火が今年の中秋パーティーに美しいピリオドを打ちました。

TW ガマニュース
2016.09.30

楊樺:ニュースであなたの世界を構築する

目で見るのが一番正確 ニュースの写真を見る、目を見るのが一番正確だ。ニュースの取材をするのなら、目で見るのが一番正確だ。楊樺は頑固な新聞現場主義者で、「戦争の最大の犠牲者は真相だ」と言います。たとえ前線に行ったとしても、争いが生じた原因は往々にして見ることはできません。ではどうして記者は自分の理想をあきらめ、少しでも真相に近づこうと努力しないのでしょうか? ノルマンディーの上陸については、どの戦争記者も知ることがなかったようです。唯一の写真は、ある原因により非常にぼやけており、仮にあなたがそれで作業をしても失敗してしまうほどです。しかしそれは作業ではありません。それは歴史です。それは人類のためにあの瞬間の人間性を凍りつかせたのです。目で見る、写真の中の目を見る、そうするとより多くのことが見えてくる。 あなたはどれだけ現場の近くにいますか? ある戦場カメラマンは言いました。「あなたが十分うまく撮れなかったとしたら、それはまだ近づき足りないからだ。」この言葉にはTVBSの野心が明確に表れています。去年初頭、TVBS戦場記者2名がそれぞれヨルダンとトルコから戦地に入りました。4年間内線が続いているシリアとクルド人を含むこのシリーズは『人道と正義:中東の戦火線をゆく』という名前です。その中には戦火により破壊されたシリアや、様々な国に保護を求めて流出していった難民たちの姿があります。難民たちは故郷を離れる辛さや家族を失った苦しみに耐えなければならないだけでなく、様々な差別を受けるかもしれません。これらは、現場に行かなければ、見ることはできないのです。あなたが現場に行くのは非常に難しいことでしょう。だからTVBSの記者が行くのです。 なぜ行かなければならないのか?それはこの世界の様々な事件を明らかにし、あなたに世界が毎日変化しているのだということを知ってもらうためです。私たちにとって快適なことは往々にして他人の快適でないところからきており、ひいては苦痛ですらあるのです。現場により近いからこそ、世の人々に知らしめるためにこの情報を持ち出すことができるのです。この他、記者たちは現場で希望を見つけ出すことをさらに願っています。中でも子供の笑顔は最もプライスレスなものです。 合理的であることは、不合理である 一般的に合理的な行為は戦地から離れていることでしょう;しかし戦場記者にとっては、他人が撤退した時にこそ前に突き進む必要があるのです。このような不合理な行為こそが、適格な戦場記者にとっては合理的な行為となるのです。そのため『不合理な行為』を見られることを強くオススメします。この不合理において、戦場記者が自らの人生と家庭、ひいては命をも捨て去るのは人間性に呼び寄せられ、多くの時を記録しなければならないからなのだということが分かります。 あなたの戦場はどこにありますか? 戦争している現場だけが戦場というわけではないのです。現在の世界では、環境、気候、教育、文化、貧困のすべてが戦場です。楊樺はみなさん自ら行ってみることを強く推奨しています。戦場記者に加わる情熱がなければ、NGOという役割により赴き、自分の世界観を覆すのです。一度この残酷な「戦場」を渡り歩き、自分の国際的な感覚を新たに構築し直すのです。このような過程においては非常に多くのことが思考すべきであると言えます。例えば:あなたの国際的な感覚はどの国の主観と目線により構築されたものなのか? 存在する場合にのみ、音がある 最後に楊樺は、彼の最大の望みは、ニュースの専門性と台湾人の勇敢さにより、国際社会に台湾の戦場ニュースの存在を無視できなくさせることだと言いました。それはまるで当初CNNとロイターでさえも振り返って彼に写真を求めたかのように。なぜなら彼にしか捉えることができなかったからです。では彼とは誰なのでしょうか?他は楊樺、台湾の戦場記者。彼は、国際社会において台湾に音を持たせたのです。

TW ガマニュース
2016.09.30

ガマニア人新生活を実践 多元化された空間を共同で創り出す

仕事は生活の一部分であり、すでに新しい生活観念と雰囲気が徐々に生まれて変化を始めつつあり、空間の中ではガマニア人の多元的な仕事文化が確かなものとなっています。各ユニットは個々に例えばブランディングセンターや人間工学デザインスタジオCiircoといった巧みな構想を持っています。様々な仕事のパターンに対応するために、相応の空間モジュールを派生し、さらには新しい形態のオフィス空間を生み出します。 ▲ブランディングセンターのidea kitchen 1Fにあるブランディングセンターは、各所に驚きと喜び満点のハイライトが満載で、中央通路にあるピクニックソファーエリアは、スタッフたちに即席のディスカッション空間を与えてくれます。そして文学的な雰囲気に満ちあふれたidea kitchenに身を置けば、まじめに仕事をするだけでなく、リラックスするための調整もでき、さらには想像力と創造力をかき立てることができるのです。お客様をお迎えすると同時に、ガマニアのクリエイティブ空間についてハッとするような印象を与えることでしょう! Ciircoはまず休憩の空間と仕事の空間を融合させる方法を実践しました。COOのMichelleはスタッフたちの効率をアップさせることができる仕事のパターンを共有し、「ポモドーロ・テクニック」の概念を例にあげて言いました。注1:「1つのポモドーロを25分に設定し、この25分間は1つのことだけに集中して、他の事に気を散らすことなく、完了後は5分間休憩する。これを4回繰り返します。」Michelleが強調したのは、ポイントは5分間の休憩時間にあるということです。休憩空間には集落方式の分布によりデスクから遠くない場所でリラックスした雰囲気を創り出し、5分という時間を有効利用して仕事から隔離して、休憩の効果を得て効率をアップさせるのです。 高度な融通性の応用、空間の柔軟性を留める。 人間工学の開発、研究からデザイン、運用までの一連の生産ラインにおいて、プログラミング担当には高度に集中すること、営業担当には絶えることのない会話とコミュニケーション、そしてデザイン担当には環境を介して互いにインスピレーションをかき立てあうことが必要です。三者の仕事の方法は非常に違いが大きいため、環境において柔軟性を造り出すことが求められました。そのためMichelleはオフィスに「Flexible」というキーワードを与えました。それはすなわち将来空間が柔軟性と融通性を留めているようにすることで、スタッフたちがコミュニケーションをしながらも互いに干渉しないようにし、さらに共同のイベント空間で交流できるようにすることでもあります。 ▲ Ciirco による休憩とミーティングが結合されたフレキシブルな空間 人の行為を育てるのは空間ですが、人は環境を育てることができます。すでに新しい仕事文化が蔓延し始めており、異なる性質のものを併せ持つ「新たな生態」を派生しつつあります。将来ガマニア人は時代の変化に対応し、共創共生し、エネルギーを集中させて、すべてのエコロジカルネットワークの新たな未来を切り開きます! 注1:ポモドーロ・テクニック(Pomodoro Technique)は、1980年代にFrancesco Cirilloにより考案された。

VOL. 75 ガマフィーチャー
2016.09.29

なぜグランドがAppleのおいしいところを持っていくのか?!

この文書を書いた日に(2016/9/7)、Apple iPhone 7の発表会が行われました。勿論、ソーシャルメディアでのニュースは正反論の一方でしたが、私は気付いた面白いところは両方とも製品に関係ないところでした。但し、上手く話題性を利用した他社ブランド名がiPhone 7の議論中に現しました。その中、iPhone 7の機能の斬新さ、進化を問わず、Apple社を揶揄うと同時に、自社ブランドをアピールした例もありましょた。 羨ましくなくても一秒でiPhone 6をiPhone 7に変身。 iPhone 7が発売する前に、最も噂になったのはイヤホンジャックの廃止でした。「本当に廃止になるか。今まで使ってきたイヤホンを海に捨てるのでしょう。」などの議論もありました。 ▲やはり、iPhone 7が3.5mmのイヤホンジャックを廃止し、Lightning端子を使用 やはり、iPhone 7がイヤホンジャックを廃止し、Lightning端子を使用したEarPodsを開発しました。そして、3.5mm変換アダプターの両方が付属することで、従来の問題を解決したのです。(或いは電動歯ブラシに揶揄われたEarPodsを使っても良いのです。)但し、こういった解決方法が世論を抑えることができませんでした。 ▲変わった外見のAirPodsは電動歯ブラシに似ていると揶揄われた。

ガマコラム セールストレンド