2018年最初の投稿となりました。本年もDesignSupply.をどうぞ宜しくお願いいたします。   今回の記事は遅くなりましたが、昨年最後の参加イベントでした『フロントエンジニア最前線Night』の参加レポートです。今回のセミナーはフロントエンド実装で近年注目されている技術や考え方などの共有と勉強という内容でした。   会場は前回も利用させて頂いたグランフロント大阪の35階にあるさくらインターネット大阪本社です。エレベーターで35階まで上がり先に進むとサーバーがお出迎え、そのまま通路奥に進むと会場となる部屋に入ります。     開始時間ギリギリの到着だったので既に多くの参加者で賑わっていました。なんと今回はピザとドリンク付き！奥のカウンターで調達し、席に座ります。（慌てて撮ったのでピンボケですが、、）     定刻になりセッションが開始。まずは会場を提供いただいているさくらインターネットさんからのご挨拶から。     今回のセミナーは3本立てで、 ・オブジェクト指向でアプリケーションのUIデザイン ・AMPとPWA ・フロントエンド開発におけるファイル結合 という内容でした。  

オブジェクト指向でアプリケーションのUIデザイン

まずは1本目のセッション、UIデザイン設計についてのお話でした。 アプリの画面デザインをするときは画面ベースでデザインを制作するのではなく、データ構造に従って作成すると良いとのことです。   よくあるデザイン制作フローだと、どうしても画面のカンプデザインを先に揃えるという感じですが、その場合は機能ベースで考えた時に不整合や無駄というリスクが生じてきます。   システムや機能が強く影響する場合、まずはデータ構造を整理し、要件をオブジェクトとしそこから機能を属性と位置づけ、それを基に画面ごとにビジュアル化していくという流れです。   確かにアプリに限らずウェブ制作の場合でも、画面のカンプデザイン先行でなく、機能のみをまとめたワイヤーフレームやプロトタイプを先に作成し、そこにデザインを色付けしていくという方法も検討してみたいと思いました。その方がユーザーの使い勝手（＝UX）も反映させられることが期待できます。   今後、自社のワークフローで是非取り入れていきたい手法ですね、参考にさせていただきます！  

AMPとPWA

2本目は今話題となっているAMPとPWAのサンプルケースの紹介でした。   AMPとはAccelerated Mobile Pagesの略で、ページ表示速度を高速化させたモバイルサイトの新しい仕様です。ページ表示が高速になるだけでなく、検索結果にページがサムネイル表示されるなどのメリットがあります。   PWAとはProgressive Web Appsの略で、ウェブサイトに様々な機能をつけることでアプリ化させるという考え方です。近年のモバイルデバイスに搭載されているOSやブラウザの進化で、プッシュ通知などのいろんな機能がウェブサイトで実現できるようになります。   具体的なサンプルケースとともに紹介され、メリットや実装時のポイントなどわかりやすい内容でした。今年は自社でも実際にAMPとPWAは試していきたいですね。   3本目のフロントエンド開発におけるファイル結合はレベルが高く理解するのが難しかったですね。。もっと勉強しなければ、、   セッションが終わり、その後は参加者との名刺交換を兼ねた交流会でした。 良い出会いに感謝ですね！   今回のセミナーではその名の通りフロントエンド開発における最新のトレンドが学べました。実際の制作にも取り入れてユーザーの満足度向上に是非つなげていきたいですね！