公開ポリシー
このページは、本イベントの参加者(およびフォローアップ参加者)限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。
- このページのID/パスワードの情報はツイートなどされないようにお願いします。
- CSS Niteのコンテンツの再利用について
ブログやSNS
「こんなセミナーに行った」「ここが印象に残った」等、ブログなどで取り上げてくださると嬉しいです。こちらのバナーはご自由にお使いください。
7Fから
このたびは7Fへお越しくださり、誠にありがとうございました。
大宮にもこんなところがあることを知っていただける機会になり、当スペースとしてもとても楽しく有意義な時間になりました。
当スペースでは今回ご利用いただいた貸会議室の他に、コワーキングスペース・シェアオフィス・レンタル教室と4つの形態でスペースを展開しています。目的に合わせてご活用ください。
コワーキングスペース7F
2時間500円/1日1,000円、フリードリンク付き、電源・Wifi完備で自由にご利用いただけるスペースです。
予約も必要ございません。
貸会議室6F・レンタル教室
(今回の会場となったところです!)
1回2時間、2,000円/hからご利用いただけます。
空いていれば予約なしで利用可です。
シェアオフィス6F
電話番号や住所利用、専用半個室や家具もついて、より集中できるワークスペースです。
求人
また、本編冒頭で紹介させていただきました求人にピンと来た方は、https://office7f.com/recruit/ からご応募いただけますと幸いです。
スタッフ一同、またのお越しを心よりお待ちしております。
「webクリエイターのための情報交換所」スペシャル/阿部 正幸(KDDIウェブコミュニケーションズ)+後藤賢司(よつばデザイン)前川 昌幸(イー・ネットワークス)
後藤さんから
CSS Nite SAITAMA Vol.1へのご参加ありがとうございました。
一年間の情報を振り返るという内容でしたがいかがでしたでしょうか?
情報収集を日常的にしていてもまとめて振り返る事は多くないと思います。
まとめて振り返る事で大きな流れが見えてくれば、人によっては今後どのようにスキルアップをしたり、お客さんにどんな提案をすれば良いのかのヒントが見つかったかもしれません。私自身はこの内容を打ち合わせなどでウェブまわりの最新動向などの共有として活用しています。
今回はトピックによっては少し掘り下げるという事を行ってみました。自分の専門分野以外の情報は知ってはいても意味はいまいち理解できてない事も多くあります。
全ての情報を理解する事は難しいと思いますが、そのような情報の理解が少しでもあったら幸いです。
引き続きFacebookグループでは有益な記事をシェアしていきたいと思っています。
今後ともよろしくお願いします。
阿部さんから
CSS Nite in SAITAMA, Vol.1 powered by 7Fに参加いただきました皆様ありがとうございました。
「webクリエイターのための情報交換所 ダイジェスト」に登壇させていただきました、
KDDIウェブコミュニケーションズの阿部と申します。
私はかれこれ18年ほど、サーバーサイド側のエンジニアとしてWeb制作に携わって来ました。
私からは下記についてフォローアップさせていただきます。
- Bootstrapについて
- Webの高速化について
Bootstrapについて
Bootstrapの最新バージョン「4」が1月18日にローンチされました。
IE10以降に対応しているので、IE9以前のブラウザサポートが不要なのであれば、Bootstrap4を使うと良いでしょう。
私はなぜBootstrapをオススメをするかと言いますと、フロントエンドフレームワーク(front-end frameworks)としては世界で一番使われており、情報量や、無料・有料のテンプレートが豊富だからです。
さっとレスポンシブウェブサイトを構築したい方や、どのようなコードが書かれているかを勉強するには良いツールです。
使い方は様々なところで紹介がありますが、2箇所紹介させていただきます。
- Bootstrap公式ドキュメント
https://getbootstrap.com/docs/4.0/getting-started/introduction/ - CPIスタッフブログ
https://shared-blog.kddi-web.com/bootstrap4
Webの高速化について
Webの高速化は昨今注目を浴びています。
高速化を行うには、まずどこがボトルネックになっているかを知ることです。(だいたいの原因はバックエンド側にありますが)
まずは自社もしくは、クライアントサイトの速度調査をしてみましょう。
下記ツールを使うことで手軽に速度調査をすることができます。
- Test my site.
https://testmysite.withgoogle.com/intl/ja-jp
3G回線でのシミュレーションができます。 - GTmetrix
https://gtmetrix.com/analyze.html
スコアがA(良い)〜F(悪い)で表示される。
改善箇所がコメントで表示されるので、改善に役立てることもできる。
日経電子版の場合は、下記対策を行いました。
- CDN(Fastly)導入(上位のキャッシュサーバー)
- ServiceWorker(ブラウザキャッシュ)
- HTTP/2(ネットワークプロトコル)
- Resource Hintdns(コンテンツの先読み)
- webp(画像圧縮)
高速化については、少し内容が難しくなってしまいます。
ディレクターやサイトオーナーの方は、どれくらいの表示速度なのか程度は気にしておくべき事項です。
あまりにも遅いようでしたら、改善を提案ください。
お気軽にフォローください
下記は私のソーシャルアカウントです。
LINE@ではセミナーの無料招待チケットなどもお配りしております。
お気軽にLine@、Facebookフォローいただけると幸いです。
- Facebook
https://www.facebook.com/chiyo.abe
- LINE@
https://line.me/ti/p/@gkv8736o
- CPIスタッフブログ
https://shared-blog.kddi-web.com/
ご参加いただきました皆様ありがとうございました。
前川さんから
CSS Nite SAITAMA Vol.1へのご参加ありがとうございました。
1年間のトピックを振り返るということで、一見はそれぞれはバラバラの情報に感じます。
しかし、俯瞰してみてみると世の中の、この業界の流れというのがなんとなく見えてくるように感じます。
この一年で私自身は
- GoogleやMozillaを始めとしたブラウザベンダーのHTTPS推進
- ページ表示の高速化に向けた環境の整備と、日経新聞社を契機とした国内での対応の加速
- ウェブ制作に関わるツールへのAI(機械学習)の導入強化
という流れを感じていますし、今年も続いていくのかな?と考えています。
さらに今年は、いわゆるスマートスピーカーなどを利用した、非スクリーンでのコンテンツ提供などのニュースが増えてくるのではと予想しています。
この業界も、ゼネラリストも求められる一方で、各職域の専門家も進んでいます。全てに精通するにも無理があるかと思いますので、今回のような振り返りをすることで、ある程度の広さで知識を備えて役立ててもらえば幸いです。
ありがとうございました。
「The right tool for the job 適材適所で使い分ける正しいツールの使用法」
/鷹野 雅弘(スイッチ)
フォローアップはこちらにまとめました。
「フォント動向」
/関口 浩之(ソフトバンク・テクノロジー)、鷹野 雅弘(スイッチ)
フォントおじさんこと、FONTPLUSの関口浩之です。ご参加いただき、ありがとうございました。セミナースライドを共有します。
CSS Nite in SAITAMA, Vol.1 フォント動向
アンケートで「Webフォントをもっと知りたい」とのご意見いただきましたので、日本語Webフォント講座の最新版(全114ページ)をご紹介いたします。導入事例も約30サイト掲載しました。クライアント案件における日本語Webフォント提案時のヒントになればうれしいです。
昨年夏に「フォントおじさんが誕生するまで」の記事が『HTML5 Experts.jp』ポータルで紹介されました。この記事で、過去6年間の日本語Webフォントの課題やサービス改善の変遷、技術情報などが紹介されています。ご一読いただけるとうれしいです。
フォント素人のWebエンジニアが「フォントおじさん」に聞いてみた!Webフォントの最近の事情とか
アンケートで「ナール書体を久しぶりにみて感動した」とのコメントいただきました。写真植字(写植)の文字盤/メインプレートを回覧しましたが、DTP普及前の1980年代までの多くの書籍と雑誌は、写植で組版したものを印刷していました。回覧しま文字盤は「ナール」というフォントで、写植メーカーの写研から1973年に発売された丸ゴシック体です。それまでは、伝統的書体である明朝体と角ゴシック体が中心だったので、ナールはグラフィックデザイン業界で、革命的書体として受け入れられました。同時期に「タイポス」というデザイン書体も発表されて、ナールとあわせて一世を風靡しました。今から40~50年前のことなのです。ナールとタイポスが、その後の新書体ブームの礎になりました(残念ながら、ナールはパソコン用フォントとして発売されませんでしたが)。
セッションの中で「半角等幅の欧文は海外の人にとって奇妙に見える」のお話をしましたが、ドイツ在住のMonotype小林章さん(世界的に有名な日本人書体デザイナー)の登壇動画で活字のリズム感(心地よい歩幅)の視点で解説していますので、ぜひご覧ください。シューズの例題で使ったフルティガー (Frutiger)のフォントの話もでてきますよ。
またの機会にお会いできることを楽しみにしています。
ソフトバンク・テクノロジー株式会社
FONTPLUS エバンジェリスト
関口浩之
Twitter: @HiroGateJP
Facebook: https://www.facebook.com/hiroyuki.sekiguchi.8/
Mail: hsekiguc@tech.softbank.co.jp
「Webディレクター手帳に込めた想いから紐解く、サイトプランニングのポイント」
/田口 真行(デスクトップワークス)
デスクトップワークスの田口です。
セミナーへのご参加ありがとうございました!
Webサイト制作のサイトプランニングは、「誰に対して(ターゲットユーザー)」、「何を与えて(コンテンツ)」、「どうさせたいか(コンバージョンポイント)」という軸をおさえて進行します。中でも、「ターゲットユーザーの絞り込み」は、プランの精度を高める重要なプロセスです。
「たくさんの人にアクセスして欲しい!」というザックリした願望は、「このユーザー層を確実におさえる!」という明確な狙いを定め、そこに有効なコンテンツをもってアプローチしない限り、クライアントが求める成果を達成することは難しいでしょう。
実在する人物をユーザーモデルにターゲットユーザーを設定することで、そこにアプローチすべき切り口や材料が発見できます。さらに、これは日頃から「人を観察する」ことを癖づけることで、そのスキルを磨くことができます。
また、Webサイト制作のプロジェクト進行は、「事前に予測を立てて、対策を打つ」ことが、二転三転やトラブルを回避することにつながります。先手必勝で挑む「先読みマネジメント」を心がけることで、よりスムーズなプロジェクマネジメントを実現していきましょう。
今回、セミナー中にみなさんが感じたこと、「これ、やってみよう!」って気付いた発見は、日々の現場でガンガン活かしていただけたら嬉しいです。
私も次回お会いする日まで、さらに腕を磨いてまいります!
ありがとうございました!
■セミナーフォローアップ特番、生放送ライブ配信決定!
3月29日(木)20:00~20:30、田口セッションのFacebook Liveで生放送ライブ配信します。
今回のセミナーの“おさえどころ”をあらためて振り返りつつ、参加者からの寄せられたご質問やリクエストの声にお応えします。どうぞお楽しみに!
https://www.facebook.com/webdirectorshool/videos/1705665616160614/
※『リマインダーを設定』ボタンをクリックすると、配信前に通知が届きます。
■田口真行のFacebook
https://www.facebook.com/TaguchiMasayuki
※フォローや申請はお気軽に!セミナーの感想やご質問もお待ちしています。
■Webディレクター手帳
現役18年目のWebディレクター 田口真行の「サイトプラニング手法」と「マネジメント手法」をベースに開発したディレクションツール『Webディレクター手帳』がオンラインショップで販売中です。
https://webdirection.jp/tools/
お問い合わせ
ご不明点やお気づきの点がありましたら、フォームからご連絡ください。