LINEが公開した日本語コーポレートフォント「LINE Seed JP」について、@spring_rainingがプロジェクトチーム (@kota.yaginuma, @yang_kyungjin, @momo.yagihashi) に聞いてみました。
LINE Seed JP Promotion Movie from LINE CREATIVE CENTER on Vimeo.
--- ### 採用について@spring_raining
こんにちは、UITの玉田です。今回も、UIT INSIDEを始めたいと思います。
UIT INSIDEは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポットキャストです。
最新のウェブ標準の動向や開発、フレーマークの変遷、UIやUXに関することまで、毎週フロントエンドの情報を発信していくことを目的としています。
@spring_raining
さて、今回はですね、 テクノロジーとはちょっと今回は離れてしまうんですけれども、 先日LINE Seed JPという素晴らしいフォントが公開されたというニュースがありました。
で、個人的に私がすごく興味があったところですので。えっと、今回は思い切って、
@spring_raining
LINE Seed JPの制作に携わっていただいた、3人を今回お呼びして、ぜひ、じっくり話をしていこうかなと思っております。柳沼さんとヤンさんと八木橋さんの、3人を今回はお呼びさせていただきました。それではよろしくお願いします、
@momo.yagihashi
よろしくお願いします
@kota.yaginuma
よろしくお願いします。
@spring_raining
はい、ではですね、えっとー、まあ、いきなりなんですけれども、ちょっと自己紹介を 3人にちょっと簡単に紹介お願いしたいんですけど、もすいません、では、どなたから行きます？
@yang_kyungjin
はい、簡単にします。私は、LINEのBXで、BX1チームを担当しているヤンと申します。よろしくお願いします
@spring_raining
よろしくお願いします。
@kota.yaginuma
はい、私はBX室、デザインチーム所属しております。柳沼と申しますよろしくお願いいたします
@spring_raining
よろしくお願いします。
@momo.yagihashi
私はクリエイティブセンターのクリエイティブ戦略チームにおります。八木橋ももと申しますよろしくお願いします
@spring_raining
よろしくお願いします。はい、でですね、ま、いきなり自己紹介と言ってしまって、あれなんですけど、 そもそも、結構UITとは全然違う部署ではあるんですね。なのでBXってなんだみたいな、クリエイティブセンターって、なんだ？みたいな ところはちょっとあったかなと思うんですけど。そうですね、ちょっとそもそもになっちゃうんですけど、BXってなんなんですかね。
@momo.yagihashi
ちょっと自己紹介が簡単すぎますよね。そしたら、先に私の方から、クリエイティブセンターについての説明を簡単にさせていただきます。
私たち3人ともクリエイティブセンターに所属してるんですけど、LINEの中にあるデザイン組織が、クリエイティブセンターです。
@momo.yagihashi
一応、横断的な独立した組織として、デザイナーが100人強在籍しています。
で、主にLINEを中心としたLINEのファミリーサービスのUIUX、ブランドデザイン、あとは、スペースデザインとか、イラスト、映像制作などなど。すごく幅広い領域のクリエイティブ制作を担当しているのが、クリエイティブセンターになります。
@momo.yagihashi
で、えっと、今回の Seed JPの制作にあたっては、クリエイティブセンターのBXデザイン室が舵を切って進めたプロジェクトになっているので、ヤンさんと柳沼さんはBXのデザイナーです。
で、私は戦略チームっていうところで、主にデザイン組織としてのプロモーションを担当しているメンバーになってます。
@momo.yagihashi
今日はこの3人で参加してます、よろしくお願いします
@spring_raining
よろしくお願いします、ありがとうございます
@momo.yagihashi
BXの紹介はヤンさんからします。
@yang_kyungjin
私とはい、柳沼さんが所属しているBX室 なんですけど、ま、主にオフラインおける、クリエイティブだったり、まあ広い意味では、LINEのブランドアイデンティティを担当している組織でございます。はい、ちょっと「BX」と「ブランド」、まあ意味としては、ちょっとあんまり普段は使っていない言葉かもしれないんですけど。
あ、BXという意味はブランドエクスペリエンスという意味で圧縮して使っています。
@yang_kyungjin
BXデザインのミッションというか、デザインよることは、課題に解決して、ユーザーとサービスの距離を縮めて、生活のプラットフォームとして定着することを目指しています。はい、そのぐらいで大丈夫ですかね。よろしくお願いいたします。
@spring_raining
いや、十分です、ありがとうございますはい、なるほど、なるほど、よろしくお願いします。
あれですよね、ちなみに、UIUXのUXっていうのは、ユーザーエクスペリエンスの略なんですよね。
@yang_kyungjin
間違いないです。
@spring_raining
結構近いかもしれない。ただ、100人以上ということで、すごい、なんて言うんすかね。もう手広というか、ブランドの 関する、今回はフォントなんですけれども、オフライン中心で、すごくもう本当にいろんなことをされているという。
@momo.yagihashi
そうですね、あんまり知られてないんですけど、LINEって、ほとんどのクリエイティブをインハウスで制作しているので、 オフィスのデザインとか、空間デザインとかに至るまで、実は社内にデザイナーがいるので、 なんでもやっぱり社内で賄うインハウス文化ってのがあるので、100人くらいのデザイナーがいて、自分たちで作ってるっていうようなつくりになってます。
@spring_raining
なるほど。あ、ブランドスペースデザインって、そういう
@momo.yagihashi
そうです。スペースデザインは、もう本当に建築系のキャリアを持ったメンバーがいたりします。
@spring_raining
それはすごいですね、それだと100人いりますね。
@momo.yagihashi
そうです、すごく幅広いと思います、
@spring_raining
ありがとうございます。
@spring_raining
で、はい、今回紹介するLINE Seedについてなんですけれども、まあ、これを聞いてる段階では結構皆さんご存じかもしれないんですけれども。
@spring_raining
LINE Seed JP、LINE Seedというのは、LINEのコーポレートフォントになります。コーポレートフォントということで、 LINEの色々なところで使うためのフォント、フォントデータになります。で、これ今回画期的だったことの1つがですね、フォントデータを丸々公開してしまうという、これは結構利用者目線では結構驚きを感じたことでもあります。これも、私も本当に社内でリリースしましたっていう告知を見たんですけれども、いや、これは初めて見たときはすごく驚きましたし、これを使ってどういったことをやっていこうかっていう所がすごくワクワクしております。
@momo.yagihashi
ありがたいです。正直リリースするまでどういう反応が来るんだろうってのは、ドキドキしてた部分があったので、デザイナーとしては、すごく大きい規模の取り組みで、すごいことやってるんだっていう自負はあったんですけど、他の、例えば、エンジニアの方たちから見て、どのくらいインパクトがあるのかどうかが正直わからなかったので、 そういう声をいただけるのが1番嬉しいですね。
@spring_raining
なるほど、でもそもそもそんなに日本語のフォント全部作るっていう例自体はあんまり聞かないので、 ま、どういう反応があるかっていうところは、まあ確かに出すまでわからないというところだったと思うんですけど。いや、でも公開してみたら、本当になかなかすごい反響があったかなと。私の個人の観測ではよく耳にしてますし、注目度は高いと思います。
@yang_kyungjin
ありがとうございます。
@spring_raining
で、えっと、そんなまあLINE Seedなんですけれども、えーっとま、結構あのー。制作に関する話では、割と告知のタイミングで、色々なブログ形式で公開されていたり、いろんな媒体で公開されていると言われています。で、えっとーShow Noteの方にもいくつかいろんなインタビュー記事であったり、リリースノートとあと、公式サイトの方も。Show Noteに貼っておきますので、そちらを見つつ。で、見てもらった前提で、一応話をしていこうかなと思うんですけれども。
えっと、そうですね、まずは1点で言うと、フォントの開発の開始が2021年2月ということで、まあ、すごく色々なことがあったかなとは思うんですけれども、ざっくりどういった感じで、フォントってそもそもどういう流れで プロジェクトとして作っていくのかっていうのは気になったので、まずそこの点についてちょっと聞かせていただけますか。
@kota.yaginuma
はい、じゃあ、私、柳沼がお答えします。えっとー、流れですけれども、えっとー、まず前提として、 そのプロのフォントデザイナーの方と一緒に協業していて、フォントワークスさんとフォントリックスさんっていう会社と協力して、制作しています。で、BXの私たちは、ディレクション、フォントのディレクションをしています。
@kota.yaginuma
で、実際のデザインは協力会社の方でしております。
で、流れはまずは文字の設計ですね 。と、骨格文字の骨格になる部分を設計していって、まず、第1段階として、デザインのどういう方向性なのかっていう、デザインの方針が決まります。で、そこから次は、よく使う漢字、よく出てくる漢字とかひら仮名、カタカナ、200字程度を試作してもらいます。
で、この200字っていうのは、LINE Seed、JP 4ウェイトありますけれども、各200字ということです。
@kota.yaginuma
で、そこでやっとこうベースとなる土台が決定します。そこから、やっと 文字のこの大量生産と言いますか。9000文字近くあるので、その量産が始まって、1番長い期間のこの実制作の部分なんですけど、
@kota.yaginuma
で、その実政策の期間の間でも、こう何度も何度も僕たちの方では確認して、調整お願いして確認して、調整お願いしてっていうの繰り返し作業していました。はい、で何度も繰り返して、ついにえーリリースを迎えることができたというわけです。簡単ですけれども、このような流れでプロジェクトは進行しておりました。
@spring_raining
いや、あれですねし、シンプルに 物量がすごい。本当に確認と、調整の繰り返しだったわけですね。いや、9000、しかも4ウェイト全部ですよね。おお、なるほど、
@spring_raining
いや、 こういうやり取りみたいなのは、実際に文字を見て、これはデザイナー目線でこの、
まあ、例えば「はらい」はもうちょっとこうした方がいいみたいな、具体的なアドバイスを本当に地道にやっていく形だったんですかね。
@kota.yaginuma
はい、まさにその通りで、例えば、ひらがなのこうストローク、 もうちょっとこういうカーブの方がいいんじゃないの。とか、そういうのを。メンバー同士で意見交換しながら、 ここの「ハネ」どうだろうとか、そういった確認をし合いながら進めていきました。
@spring_raining
うん、あー、いや、本当に微調整…いや、すごい、結構あの1個、懸念としてはなんですか。その9000文字×4を
それぞれの1文字ずつ見ていくっていうのところもそうなんですけれども、それを今回6人ということなので、6人で分担していったら結構なんてすか。ニュアンスがこうバラバラになっていくんじゃないか、みたいなところは思ったりしたんですけれども、そういったところはどうやってこう、全体の雰囲気というか、デザインを揃えたっていうのは、どういった、工夫とかありましたか？
@kota.yaginuma
すごい鋭いコメント。
@kota.yaginuma
もちろん、意見が分かれることあります。でもまあ、そのための複数人のメンバーでやってるので、例えば、Aの方向とBの方向があったとして、どっちがよりLINEらしいだろうとか、そのLINEらしさについて、なんかこう改めて考えさせられる、こう言語化していくような作業っていうのもあったので。
@spring_raining
LINEらしさ…LINEらしさをフォントで表現って、めちゃくちゃ難しいですね。
@spring_raining
ま、じゃあ6人がもうここからここまでは誰々さんみたいな感じなはなくて、本当に6人がこう意見交換をしながら 確認をしていったということなんですね。
@spring_raining
あと、インタビュー記事の1つで、確認の様子を、写真とかで結構見られたりしてるんですけれども、例えば1つの例だと、なんか全ての文字をこう全部紙に書いて、机に並べて確認してるみたいな。ところがあったりとかしたんですけど、これは本当に6人がこう、机を見ながらチェックしていくみたいな作業なんですか。
@kota.yaginuma
はい、そうです。もう全て出力して並べて確認をしています。というのも、モニターでも、もちろん確認はします。 ただ、その全体をこう俯瞰してみるっていうのには、モニターだとちょっとやっぱり不向きで。こう並べて全体を見るっていうのが必要な作業で、必ず。例えば、ウェイトどれか1つ上がってきた時に、レギュラーなら、レギュラーが来た時に、ボールドとの整合性を確認する時だったりとか、そうやって全体感の確認をするっていうのは、やっぱりこう出力して並べてみるっていうのが1番効果的なやり方だと思います。はい、必ず必要な作業です。
@yang_kyungjin
ちょっと追加で。やっぱりなんかモニターでは文字は綺麗に見えるんですけど、オフライン上で印刷したりとかすると、サイズによっては、ちょっと文字が潰れたりとかすることもあるので、そういうことも確認するために出力して確認したところがあります。
@spring_raining
あー、なるほど、まあそっか。そうですよね、結構割とフロントエンジニア目線で言うと、その画面上でどう見えるかみたいな話になっちゃうんですけど、まあ、今回本当にウェブだけじゃない。本当にもういろいろんなとこで使われるフォントなので。まあ、例えば文字組で紙に印刷して使われたり。あと、ポスターとかにも大きく使えたりとかで。なるほど、やっぱりオフラインでの確認が大事なんですね。
@momo.yagihashi
BXデザイン室は、結構印刷物とか、オフラインのアウトプットを作ることも多いので、そこはすごく多分、どこよりも気を使って見ていたんじゃないかなと。違うチームの私から見ても思ってます。
@spring_raining
いや、本当にもうすごく、どの環境でも使えるっていうことがこれを聞いて、すごい安心して使えそうだな、という風に思いました。
@momo.yagihashi
結構、あの狂気的な光景ですよね。あの部屋一面に文字の紙がこう貼られて並べてみたいな。結構インパクトあるので。動画にも入ってるので、ちょっと見ていただけたらと思います。
@spring_raining
9,000文字並べるだけでも、机なんか、もうすごいもう部屋いっぱいになりそうですよ。
@kota.yaginuma
いや、本当に、並べるだけでも本当に大変でした。
@spring_raining
すごい。広い会議室を借りたんですか。
@kota.yaginuma
はい、そうですね、あの、四谷オフィスの1番広い会議室借りて。
@spring_raining
ではですね、そうして作られたLINE Seedについて、えっと、実際既存のフォントと似てたら、そのフォントを使えばいいという話ではあるので、まあ何かしらこう、LINE Seed JPならではのところとかがあるかなと思うんですけれども、一応、その特徴みたいなのをプロモーションビデオとして、まあ公開されているので、それについては、1度Show Noteの方に掲載しておきます。
で、ですね、改めてどういったところが、そのフォントを使う上で、特徴かみたいな ところを聞いてもいいですか。
@spring_raining
いや、すごい、 本当にオフラインの話ですね。いや、ありがとうございます。
@kota.yaginuma
はい。先ほどちょっとLINEらしさみたいなことも話していたんですけれども、えっとまあ、そこが本当に最大の特徴で、 1つ目はこの角丸のゴシック体というところなんですけど。いわゆる角丸ゴシックみたいな可愛いものとは違って、先端がこう少しだけほんのちょっとだけ丸みがあるんですね。
そういった書体って、本当にあの、一緒に制作したフォントデザインの方からも、これは新しいんじゃない？とかいうお声もあったんで。すごく新しい試みでもあるし、このちょっとの丸みが一般的なゴシック体よりも、やっぱりちょっと柔らかい印象とか、親しみやすさっていうのが伝わるポイントの書体であります。
@kota.yaginuma
で、2つ目としては、こうモダンなものを目指しながらも、やっぱりその親しみのある印象って目指したところとこう「フトコロ」って言われるところは、ちょっと広めに設計されてます。この文字の「フトコロ」っていうのは、この文字の内側のスペースのことを指すんですけれども、
こう少しこう広めになってることで、こう明るい印象、読みやすかったりとかもしますけれども、まそういったところと、あとは、かなは曲線が多めに取り入れられてたりと、そういったことで、明るくてちょっと大人なモダン系のゴシックになってます。
@kota.yaginuma
もう1つは、やっぱ日本語ならではの美しさっていうところもあって、やっぱりジオメトリックなルールに基づいて、開発設計はしてるんですけれども、まあそもそも日本語ってこう。文字のバリエーションが多くて、漢字・ひらがな・カタカナ。で、さらに密度が変わりますよね。
ひらがなの「い」と画数の多い漢字だとこう密度が全然違ってきて、 そうなるとこう、なかなか同じ印象っていうのもなかなか与えるの難しくなるんですけど、その辺もこだわったポイントで。読む時の心地良さとか、日本語ならではの、そういう不揃いな美しさと言いますか。漢字があったり、ひらがなカタカナがあったりって。ちょっと不揃いな美しさがありつつも、このジオメトリックなルール。そういう形の整合性も取りたいっていう、そういうバランスを何度も何度もこう検証を重ねていっていて、その結果これまでにないような新しいモダンなゴシック体ができたんじゃないかなと思ってます。
@spring_raining
ありがとうございます。いや、そのLINEらしさってなんだっていうのを正直、自分でもそんなに言語化っていうのを、よくわかってないですけども、でもこういった答えみたいなところで言うと、そういう角丸の親しみかつ、モダンなゴシック体みたいなところは本当に思います。
で、元々確か、その一応指定書体として、新ゴを使ってたという記事は以前見たんですけれども、
結構一見それに近いなとは思ったんですね。そういうフトコロの広さとかは、そういったところに似てるなと思ったんですけれども、 結構よく見ると、その角丸もそうですし、もう本当になんて言うんですかね。こう、例えば、口とかのこの下のはみ出しとかが完全にもうバッサリ。あの、省略されたりとか。
まあ本当にこういう省くところは省ける、そういうこうモダンな感じみたいなところをすごい見ていて、見れば見るほどなん言うんですかね。シンプルなんだけれど、すごく考えられて作られてるなみたいな。そういった、この感想であって合ってるかわからないですけど、
@kota.yaginuma
合ってます合ってます、ばっちりです。
厳密に言うと、新ゴよりも少しフトコロは狭い。 少しだけ絞ってあるというか締まっているいうか。若干多分新ゴの方が幼く感じるかと思うんですけど、
@yang_kyungjin
多分、簡単に理解できる範囲であれば、私たちはまあ、フォントじゃなくても、デザインをする時にも結構シンプルとかモダンな方を方向性として考えてはいるんですけど、 文字というものが、なんか1個1個見るとシンプルとか、ある程度デザインすることは簡単な話ではあるんですが、それがいろんな文字が文章になったりとかの場合は結構違う話になるんですね。例えば1個1個じゃなくて、文章として読めるかどうかを見ると、 全体のデザインを考えないといけないので、それを考えた上で、多分さっきの質問もあったんですけど、みんな議論したところが、多分同じ文字のベースを持っていっても、それが文章になった時に、ちゃんと文字として機能性があるのかどうかも判断しつつ、それを通して、なんかこう。今まで多分私たちも新ゴとか使う時にちょっとこの物足りないというか、そういうことがみんなあると思うんですけど、みんななんか理想と考えているところを多分少しずつ議論して、今のLINESeed JPを作っているんです。
@momo.yagihashi
だから、可読性の問題も出てくるんですよね。文字になると、1文字1文字の美しさだけじゃなくて、こう流して読んだ時にすらすら読めるかどうかとかで俯瞰で見てたっていうのは、そういう意味もあるんですかね。
@yang_kyungjin
多分それがさっきなんか柳沼さんが言った。なんか、リズムっていうことが結構こう、文字の間の空間とか、スペースがあって読みやすくなったりとかすることもあるので、うん、それを全部含めて文字を作っています。
@spring_raining
うんうん。その可読性の面とかはなんですかね、1文字1文字は問題ないのに、ちゃんと文章にした時に、なんか違うみたいな形になってしまうと、直すのが非常に厄介というか、全体としてのまとまりを最初から持ってないと難しいところですよね。
ですし、あと結構利用者目線で見ると、あとは一応文字組というか、なんて言うんすかね、文字詰めみたいなのが必ずしもされるとは限らない。結構今回だと、特に本文とかで使われたりとか、デザイナーが使うとも限らない。そういったそういう環境で、本当に使いやすい。例えば、フトコロの広さとかも効いてくると思うんですけども、そういった、個人的にはそういう使いやすさみたいな目線でもすごい今回とても使いやすいなっていう。そういう私みたいな人、デザイナーでない人でもかなりさまになるんじゃないかな。っていうところは、印象としてあります。
@spring_raining
では、そうですね、これまあ結構いろんな場面で使うというところだったんですけれども、これは本当にどこでも使っても良さが生きるいう風に考えていいんですか。
@kota.yaginuma
はい、もうそこはもう汎用性が高いように設計して作ってるんで、もうどんなシーンでも 使っていただいたらフォントがよく見えるようにできてます。で、あとは英語と日本語は混在する使い方。今までって、英語は英語のフォント、日本語は日本語のフォントで、僕たちの場合だと、それを合成フォントとかにして調整して使っていうのが結構定石だったんですけれども、もうその必要も全くないです。
ちゃんと英語と日本語のその書体のボリューム、大きさのボリュームと、重心、ベースラインのバランスも調整して合わせてあるので、新しく追加して調整しないように、もうそのまま使っていただけるようになってます。
@spring_raining
いや、すごくありがたいですね、
@momo.yagihashi
結構これが画期的で、そもそも日本語のフォントの中でも、ここまで文字数を揃えられているコンポレートフォントっていうのが、本当にないのと、やっぱり今までだと、英字のフォント、欧文フォントが先に出てたので、その欧文フォントと合うように新ゴを使って、英語と日本語がどっちも出てくる文章とかを作るときは、微調整しながらやってたので、その調整が全く必要なくなるっていうのが、ほんとに使う人にとっては、もうストレスがないところになるのかなと思います。
@spring_raining
いや、まさしくそうです。フロントエンド目線で言うと、一応合成フォントみたいなことはできるんですよね。その英字の、この文字はこのフォントでみたいな指定はできるんですけれども、 ただそれだけなんですよね、一応将来的には、そういう実装っていうのは入ってくるっていうのは、今、それは途中の段階なんで、そういうフォントをウェブ上で組み合わせるっていうのは、すごく難しい話なんですね。で、ましてやそもそも興味持ってないと、別々のフォント使うみたいなのも難しいですし。
その調整とか、そこまでもなかなか難しい話だと思うので、それがもう本当1つで賄えるっていうのはいいですね。うん、ぜひ使いたいです。
@spring_raining
では、えっと、次のトピックに移ろうと思います。もう1つすごく画期的だと個人的には思った点で言うと、このフォントをなんと一般公開したというところなんですね。ここは本当に割と驚きなんですけども、これは何かこう反響を狙って一般公開したであったり、何かこう意図があったですかね。それとも、どういった反響を得ようと思って公開したんですかね。
@yang_kyungjin
一般公開としては、多分することによって結構メリットとかデメリットもあると思います。まあ、韓国語ではコーポレーションフォントというオリジナルフォントを一般公開するケースが結構割とあるんですけど、LINEもLINEのミッション、クロージングディスタンスがあるじゃないですか。それを元にユーザーと距離を縮めるためにCSRの一環として、いろんなユーザーが使ってほしいと思い、一般公開を決めています。
@spring_raining
なるほど、なるほど、おーいや、結構その一般公開するのが結構普通ってのはいい文化ですね。いや、でもこれすごいですよね、本当に。結構、今回反響が大きくなった点の要素の1つが、その一般公開っていうところだと結構個人的にはあるのかなと思っていて、結構周りでもちらほら使ってみたり、試してみたりっていう例も見ています。
@yang_kyungjin
多分ですね、今、世の中結構有名なフォントもいっぱいあるにはあるんですけど、 例えば英語とか日本語を持っているフォントとかもあると思うんですが、今までLINE Seedみたいに、 英語、日本語、韓国語とかタイ語とか、いろんな言語を持っているフォントはあんまり。私、今まで見たことはないフォントなんですね。で、そういうフォントがさらに、さっき今まで説明したいろんな特徴とか、 私から考えるとちょっと理想に近い文字、ゴシックのフォントが生まれているので、色んな人が使って、デザイナー含めて、一般の方にも使ってほしいなっていう考えでいるので、 楽しみにしてください。
@momo.yagihashi
結構国内のデザイン界隈だと、デザインシステムを社外に公開する会社さんが出てきたりとか。割とこう、中身を見せてシェアするみたいな文化が日本でようやく浸透してきたっていうところもあるんですけど。LINEはまあ、元々ミッションとして、クロージングザディスタンスっていうのを掲げていて、今回のフォント制作に関しても、できるだけユーザーと自分たちとの距離を近づけたいっていう思いがありました。なので、広報室のメンバーとたとえばプロモーションの相談をしてる時なんかは、ただ「フォントを作りました」って外に伝えたとしても、ユーザーにとってのメリットってほとんどないので、やっぱそこって実際に使ってもらって、体験してもらわないとユーザーにとっては旨みがないよね。っていう話もしてましたね。そういう考えもがあって、一般公開を判断したっていうところもあるかなと思います。
@spring_raining
確かにそうですよね、デザインシステムの例とかも本当にそうですよね。うんうん。本当に個人的にはそういう文化が広がってほしいなとはすごく思っていますね。いや、 素晴らしい取り組みだと思います
@spring_raining
ではですね、せっかく今回はフロントエンドとは関係ない、結構デザイン寄りのテーマでしたので、逆にフロントエンドエンジニアとして、何ができるかっていうのを、話す場にもしたいかなと思ってます。実際、色々逆の目線でも、あまりフロントエンドエンジニアのことがわからないっていうのを、話に聞いたりしているので、この場で逆に私が答えるみたいなこともできればなと思うんですけれども、実際どういったところを気にしているというか、期待していますかね。
@kota.yaginuma
はい、じゃあ私から。まあ一般的なエンジニアの方の目線でもいいですし。むしろタマダさんの目線でもいいんですけど、このフォントがというか、このフォントをどうやってこう使っていきたいなとか、どうやって活用できるなとか、そういうどんなことをタマダさんが考えてるのか、なんか、タマダさんのその頭の中をちょっと聞いてみたいです。
@spring_raining
はい、そうですね、まあもちろん、ウェブフォントとしての活用は考えていて、それもやっていきたいとは思ってます。で、結構日本語のウェブフォントを使うのって、個人的にはというか、ウェブフロントの一般の課題として、フォントをダウンロードしてこないといけないっていう、根本的に遅くなる原因を1つ抱えてしまうっていうところがあって。実際英字に関しては、もう完全に普及してるんですけれども、 日本語だと、まだまだそういうウェブフォントを使うみたいな話がハードルが高いところもあったりするんですよ。
使える場所、まあもちろん、今回のLINE Seedのティザーサイトとかは、もちろん使ってるんですけど、そういう必ずしも速度を求められるみたいなケースだと結構これは、私たちも考えていかないといけないところで。そういうところが使いたいとは思いつつも、まあ1点ハードルとしてはあるかなと思ってます。
@spring_raining
で、それ以外でも結構ウェブページ以外でも、色々と活躍できるところが、フロントエンドエンジニアでとしてあるんではないかなと思っていて。例えばそうですね、LINEのアプリを開いた時に、LIFFと私たちが呼んでいる、ウェブページをアプリケーションとして開くみたいな機能があったりするんですね。そういったところだと、結構そういうフォントデータを、例えばどこかにキャッシュしたりとか、そういった方法で、そういう遅さみたいなのを解決したりとか、あとはそうですね、ちょっとウェブとは離れてしまうんですけれども、ウェブページで表示する以外にも、例えば私たちがOGP画像と呼んでいる、画像としてこう表示させる。例えば、Twitterとかのタイムラインで、ウェブページに紹介の画像みたいなのが出てくる機能があると思うんですけれども、あれも、最近だと手で画像を作るのではなくて、ウェブの技術を使って、画像を生成するみたいな機能があったりするんですね。そういったところで、必ずしもブラウザで見るだけがウェブだけではなかったりするんで、そういったところで本当に使っていきたいですね。
@spring_raining
っていう。どうですかね、結構まとまりがなかったと思うんですけど、総じて、使いたいと思っているのは、本当に。みんなウェブフロントはそう思ってると思っています。
@kota.yaginuma
LIFFだと、使いやすいとかあるんですか？
@spring_raining
どうですかね、いや、ちょっとそれもわかんないんですよね。さっき話したのは、例えばLINEアプリ本体で、ウェブでフォントデータを持つみたいな話を想定してたんですけども。まあそれはそれでハードルがありますし。
@kota.yaginuma
でも、あれですね。タマダさんのそのおっしゃってることとか、テンションとかを察するに、超えられないハードルじゃなさそうっていう感じがしますので、期待してます。よろしくお願いします。
@spring_raining
そうですね、いや、もちろん思ってますね。そうですね、結構それの解決策の1つとして、Google Fontsへの登録っていうのは、あったりするんですよね。そういう、いろんなハードルを乗り越えていく。サイズを減らしていくみたいな工程があるんですけど、それが結構 今までのウェブだと、あんまりそういうフォントデータ自体に手を入れるみたいなのは、あんまり考慮してこなかったりしてたんですよね。ウェブフォントをもう丸々取ってくるか、それかローカルにフォントがある前提で作るかみたいな。
@spring_raining
ただ、個人的には多分フォントデータ自体への介入みたいなのを結構、今後は一般的になるんじゃないかなと思ってて、例えば、ある記事をこう「ビルド」って言って、ソースコードをまとめる作業があったりした時に、ここで使われてる文字だけを抜き出すフォントとか、そういった解決策もできますし。そういうフロントエンドの開発で、プロダクションのソースコードを出す過程で結構できることがあるんじゃないかなとは思っているので、ここらへんはすごく解決しがいのあるところだとは思います。 いや、ぜひぜひ私も早く使いたいんで、やらないといけないです。
@spring_raining
はい えー、今回はえーっと先日公開されたLINE Seed JPについて聞いてきました。 LINEのフロントエンド組織UITでは、このような技術的なキャッチアップを日々行っております。UIT inside以外にも、毎週の社内勉強会でフロントエンドの情報換を行っています。 今後も、UIT insideを通して、このような情報を外部に発信していけたらと思います。
最後に、このpodcastに対する感想をお待ちしております。ハッシュタグは#UIT_insideでつぶやいていただきますとスタッフが拾います。エピソードのご意見、ご感想などいつでもお待ちしております。はい、それではありがとうございました、
@momo.yagihashi
ありがとうございました。
