広報ブログ

アジア・オセアニア地域 9カ国 22言語パターン対応 。企業向け割引プログラム「ANA Business Flyers」アジア版 ALL NIPPON AIRWAYS

65 ANA Business Flyers I ANA - https___www.ana-business-flyers.com_

シンガポール、タイ、インドネシアなど、アジア・オセアニア地域の9カ国を対象とした、ANA Business Flyers(企業向け割引会員プログラム)のアジア版の設計・構築をTAMSAN Pte. Ltd.(TAMシンガポール)が担当致しました。

◼︎技術面で工夫した点
・9カ国計22個の言語パターンが存在。複雑にならないようユーザビリティに配慮したサイト設計
・原稿管理が複雑にならないように、更新の容易さに配慮した構築設計

◼︎プロジェクト概要
Purpose [目的]
・【対ユーザー】会員数拡大に貢献する情報設計の実現
・【運用配慮】サイトのアップデートを容易にする構築設計

ANA Business Flyers I ANA - https___www.ana-business-flyers.com_

Strategy[戦略]
戦略1.対象国・対象言語の情報をユーザーごとに保持 = 最適な情報だけをユーザーに配信
ユーザーには対象の地域と言語を一度だけ選択させるよう配慮し、初回訪問時に地域と言語を選択させ、以降はブラウザで保持した情報を基準に、サイトの情報とメールを最適な地域×言語で配信。

戦略2.サイトのアップデートにかかる手間を削減 = 使い慣れたExcelをベースに22の言語パターンの原稿を管理できる設計に
国ごとに異なる原稿内容と多言語への対応のために言語管理ファイルをベースにサイトを構築。
また、サイトのアップデートを容易にするために、原稿のマスターファイルは運用担当者が使い慣れているExcelをベースに設計。「Excelマスターファイル更新→【マクロ】→サイト用言語ファイル出力」という管理を実現。

戦略3.セキュアな情報管理とサイト管理
・会員関連情報のすべてをSalesforceで管理して、サイトと連携。運用者サイドでの会員情報編集はすべてSalesforce内で行なうことで、リスクの高いローカルでの個人情報管理を行なわないよう配慮。
・サイト自体は、WAFでプロテクト。

▼ANA Business Flyers |All Nippon Airways様のサイトはこちら
https://www.ana-business-flyers.com/

ページトップへ

【TAM勉強会】満員御礼!CSS Talk Vol.2「エンジニア向け」を開催しました。

CSS Talk

「CSS Talk」はCSSをテーマに話をする勉強会です。CSSに関する情報を、職種に関係なく共有・コミュニケーションができる場所として開催しています。このほど、TAMコワーキング大阪にて、第2回目は「エンジニア向け」をテーマとしてCSS Talk Vol.2を開催しました。

CSS Talk

概要
日時:2017-01-28(土)14:00 – 18:00
イベントページ

セッション
セッションとスライドです。TAMからは松尾と安田が登壇しました。

1. 「[数が増えてもこわくない!Quantity Queries の紹介]」 森田かすみさん
2. 「[IE9を斬ってFlexboxを使い始めたらサクサク捗った件]」 森永哲平さん
3. 「[CSSのカスタム・プロパティと cssnext]」 松尾浩志
4. 「[各ブラウザのデフォルトスタイルを見てみよう]」 Kiteさん
5. 「[コンポーネント指向と余白の設計]」 安田学 

ハッシュタグの#csstalkはTogetterにてまとめていただいています。

以下セッションの要約です。
CSS Talk
[数が増えてもこわくない!Quantity Queries の紹介]」 森田かすみさん
Quantity Queries(クエンティークエリーズ)という要素の数を指定したCSSの書き方です。
例えば、「5つ以上要素があった場合」や「5つ要素があった場合」、「要素が5つ以下の場合」のように要素の数によってCSSを指定することができます。
森田かすみさんは「デザイナーさんが作ってくださった本当に良いデザインをできるだけ実装できるように色々な方法を知っておきたい」「CMSのようなお客様が更新されるサイトでは、想定していなかったデザイン崩れが起きることがある。これを事前に防ぐことができる可能性のある書き方です」とおっしゃっていました。

CSS Talk

[IE9を斬ってFlexboxを使い始めたらサクサク捗った件]」 森永哲平さん
自社サイトをFlexboxという柔軟なレイアウトを指定できるCSSプロパティで実装したときの話です。
Flexboxを使うにはIE11以降の対応になるけれど、ブラウザのシェアを見ていくと使える時期になってきています。JavaScriptのライブラリを使えば機能は制限されるけどIE9でも使うことができます。
Flexboxを使うと今までのCSSが苦手としてきたレイアウトが簡単にできます。多少のバグがあるので気をつけることもありますが、工数は削減することができたそうです。

CSS Talk

[CSSのカスタム・プロパティと cssnext]」松尾浩志
カスタム・プロパティというのはCSSにおける変数のひとつです。継承ができたり、JavaScriptで取得することができるので、より柔軟にCSSを書ける可能性があります。ただし、新しい仕様なのでIEが対応しておらず、そのまま使うことはできません。
解決策として、cssnextという今からでも使えるように書き換えてくれるツールがあります。そのままの機能を使うことはできませんが、標準仕様にもとづいた書き方ができるのは大きなメリットです。
「将来的には使うであろうものなので、今からでも少しずつ触ってみては?」とおっしゃっていました。

[各ブラウザのデフォルトスタイルを見てみよう]」 Kiteさん
ChromeやIE、FireFoxなどたくさんのブラウザがあります。ブラウザはレンダリングエンジンというもので分類することができ、それぞれのブラウザはユーザーエージェントスタイルシートと呼ばれるスタイルを持っています。
スタイルシートを見てみると意外と同じようなスタイルを持っていることが分かります。その理由を考えたり、使われている書き方を調べることで、新たな発見があります。

CSS Talk

[コンポーネント指向と余白の設計]」安田学
コンポーネント指向とはページにある要素を小さな部品で作っていく考え方です。デザインの再利用ができるので、デザイナーにとってもメリットがあります。
コンポーネントを作っていくうえでの指針として「Atomic Design」を利用したり、レイアウトを考える時の8つのパターンをベースにすることを紹介しています。

全体的な感想
今回の勉強会もいろいろなテーマのセッションがありました。
質問コーナーが盛り上がったり、ツイートもたくさんしていただけたのを見て、楽しんでいただけたのかなと感じました。懇親会も前回同様、アルコールとピザをつまみながらリラックスした雰囲気で楽しそうにお話しをされていました。

次回は春頃の開催を予定しています。テーマは「デザイナー・ディレクター向け」のものになります。
「デザイナーから見たCSS」についてでもいいですし、「エンジニアからデザイナーに向けたCSSの話」でも面白そうです。
登壇してみたいという方がいらっしゃれば「Doorkeper」のお問い合わせページにご連絡ください。

みなさん、ご参加いただきましてありがとうございました。

ページトップへ

福井でリモートワーク!make.f 『冬の日本海トライアルステイ』を体験してきました。

冬の日本海トライアルステイ

福井駅から車で40分のところにある福井市越廼(こしの)地区居倉(いくら)町にあるリノベーションした古民家と、TAM大阪、TAM東京事務所を繋いでのリモートワークを体験しました。今回は、福井の海暮らしを体感するお試し居住企画 make fukui 冬の日本海トライアルステイにTAMとして参加させていただきました!

冬の日本海トライアルステイ

滞在していた福井市の居倉(いくら)町って、こんなところです。

<img src=

越前海岸を望む海沿いの集落です。

居倉町が越前水仙の発祥地で、日本三大群生地のひとつとして広く知られています。たくさんの水仙がもうちょっと早い時期だと咲き乱れていたのですが。。。

冬の日本海トライアルステイ

冬の日本海トライアルステイ

冬の海が荒れて波が高く、寒さ激しい白い泡、波の華が発生する日もあります、冬の風物詩ですね。泡の量は、この日はまだまだですね。

冬の日本海トライアルステイ

今回の移動するTAMオフィスとして滞在していた古民家は、福井の空き家を福井市の丸山晴之建築事務所さんがリノベーションしてくださったすてき空間。しかも、滞在していた古民家から徒歩30秒の場所にある温泉スタンドから、滞在先の浴槽に直接、温泉をひけるので、毎日のお風呂が温泉という快適さ。

冬の日本海トライアルステイ

自然の空気を吸って、仕事に戻って、

冬の日本海トライアルステイ

仕事してから温かな町の人たちと触れ合って、

冬の日本海トライアルステイ

また自然に触れて、仕事をして、

冬の日本海トライアルステイ

ご飯は、この時期にしか出会えない福井の味覚、越前ガニに舌鼓。

冬の日本海トライアルステイ

また自然に触れて、仕事をして

冬の日本海トライアルステイ

あっという間の1週間でした。

冬の日本海トライアルステイ

福井の海暮らしの良さに興奮したり、地元の方と交流したり、地元の食を堪能したりと、福井で暮らす・働くを体験し、参加したメンバー各々が福井の魅力に触れました。

冬の日本海トライアルステイ

TAMの動画チーム、Tent Sauna Partyのメンバーが、福井の風景にカメラをまわし、今回の「冬の日本海トライアルステイ」の動画を作成しました!居倉町の方々と触れ合い、福井の魅力をどっぷりと堪能した約1週間の滞在の様子をご覧くださいませ〜。

FBC 福井テレビさんの「おじゃまっテレ ワイド&ニュース」の枠で、海沿いにお試し移住IT企業がやって来た取材も受けました!

冬の日本海トライアルステイ

冬の日本海トライアルステイ

冬の日本海トライアルステイ

今回のお試し居住「冬の日本海トライアルステイ」にTAMとして参加できて本当に良かったです。いろいろと初めて体験したことが多く、大変勉強になり、福井市に行ってみたくなったよ!という声も頂き、大変嬉しくなりました。福井市のみなさま、たくさんのプライスレスをありがとうございました!!

▼ありがたきことに、reallocalさんにも取材していただきました、記事はこちらからご覧くださいませ
《日本海ステイ中!!》訪問インタビュー vol.1 – 株式会社TAM –make.f 『冬の日本海トライアルステイ』

(photo:市岡)

ページトップへ

山田錦を「醸す」醸造家、「育てる」生産者に迫る 白鶴酒造 山田錦ブランドページ

白鶴 山田錦|白鶴酒造株式会社

白鶴 山田錦のパッケージがリニューアルするとのことで、それに合わせてブランドサイトのリニューアルをご相談いただき、白鶴酒造様の白鶴 山田錦ブランドページのサイトリニューアルをTAMで担当致しました。

◼︎プロジェクト概要
Purpose [目的]
・廉価な類似品との差別化
・新しいクリエイティブに改善

Strategy[戦略]
戦略1.原料へのこだわりを訴求
生産者、醸造に関わる人の声を紹介、ものづくりの様子を紹介できるコンテンツの制作。
山田錦を「醸す」、「育てる」というキーワードで、工場長による、「特別純米酒 山田錦  酒造りレポート」の連載や、山田錦を栽培する生産者の稲刈りの様子を「生産地レポート」としてお届けしています。

山田錦レポート

戦略2.「本物感」を伝えるデザインテイストで企業の「強み」を訴求
ターゲットに合わせたシンプルで見やすいデザインとモバイルファーストを意識した設計

▼白鶴酒造株式会社の白鶴 山田錦のブランドページのサイトはこちら
http://www.hakutsuru.co.jp/yamada/

ページトップへ

次ページへ »

TAMを知る