Niigata、Tokyo、Osakaに参加してきました。neccoのノートとお知らせ。Niigata、Tokyo、Osakaに参加してきました。2020年、あけましておめでとうございます。フロントエンドエンジニアの渡辺です。Osaka(セッションデイ)に参加してきました。WordCampとは?WordCampとはWordPressコミュニティのイベントです。関する勉強会や情報交換は各地で盛んに行われています。ユーザーと開発者が、その普及と情報交換を目的として一堂に会する公式のイベントです。コミュニティによって支えられています。非営利のイベントなので、ボランティアが運営を担っています。好きという一言に尽きます。WordCamp完全ガイド」があります。Niigataでした!誰でも楽しめる和気あいあいとした雰囲気の良いWordCampで、会場のスクリーンが大きく、どの席に座ってもスライドが見やすくてとても良かったと感じています。TokyoやOSAKAでもNiigataのTシャツを着ている方をみかけました。Niigataの各セッションの感想や学んだことです。用語解説/石川栄和さん・ホームページが表示される仕組みからWPについて、それからブロックエディターの説明まで45分!・どうして古いプラグインや利用者の少ないプラグインを避けるべきなのか→前者はセキュリティに問題がある、後者は更新停止の際にこまる可能性があるため。・高機能なテーマはテーマを変えたときにその機能が使えなくなるので要注意。(テーマを将来変える事も考えてテーマを作る)・ブロックエディターの説明で出てきた、Q&Aが簡単に作れるブロックが良さそう。・プライバシーポリシーなどテキストが多くて繰り返しの要素が多いページはブロックエディターで作りたい。・プラグインの更新などでページが真っ白になったときは、サイトヘルス。管理画面には入れるようになっている。珠世さん・普段アフィリエイトについて触れる機会がないので、稼げる金額や記事(コンテンツ)の作り方など興味深かった。・日本でのアフィリエイトの歴史はおよそ20年。・他の広告媒体が縮小していくなか、アフィリエイトの市場は拡大し続けている。(15%程度の比率で今後も成長していきそう!)・テーマではCocoonとLightningが人気。Cocoonは無料で機能が豊富で読みやすく、サポートがしっかりしている。Lightningは詳しくなくても調べながら使える。・テーマは利用者数が多いものを選ぶ。(検索して情報が多く出てくるもの)・フロー型(Cocoonなど。ブログ)、ストック型(Lightningなど。ミニサイト、すでに一通りの記事ができているもの)・プラグインを選ぶポイント:最終更新日が1年以内のもの、有効インストールが多いもの、検証済みの最新バージョンが最新のWPのもの。・情報を発信する際は法律をきちんと守って、正しい情報を伝える。(不適切な表現はしない)・自分の体験したことや、一次情報(正確な情報)を伝えるようにする。弘樹さん・Slidoを使ってクイズの答えをリアルタイム投票できるのがよかった!投票の内訳がリアルタイムに見れて面白いし、一体感が生まれる。サイバーセキュリティ.comでみることができる。・WordPressに対する攻撃はプラグインとテーマに対する攻撃が多い。・パスワードは自分で覚えないで、ツールや手帳に記録する。・パスワードの管理方法として「手帳に書く」ことが正しいと初めて知った!(条件:パソコンと一緒にしておかない、管理は厳重に行う、手帳をなくしたらパスワードを再設定)・WordPress本体のアップデートは設定を変えていなければ、マイナーアップデートは自動でしてくれる(セキュリティアップデートも)・事前の準備・運用やWordPress運用での対策のあとにプラグインでの対策を考える。・使っていないプラグインは削除、目的に合ったプラグインを選択、必要な機能を正しく設定。・もっと細かくセキュリティを設定したいときはプロにお願いする。賢司さん・制作で一番費用がかかるのは人件費。作業に当たる部分の費用が大きい。→素材やテンプレートの活用で工数を減らす。・世界に一つだけ、独自のシステムが必要というのは稀。凝ったシステムは使われないこともある。・予算が少ないときは、ウェブサイトを段階的に成長させる。・見積もりは細かく丁寧に具体的に伝える。(細かく伝えることで説得力が増す)。追加内容は都度見積もりする。・ウェブサイトは次のコミュニケーションのきっかけのためのコミュニケーションツール。・検索エンジン、人の両方に理解される設計で作る。・シンプルな構造で、永続性のある(テーマを変えてもコンテンツが維持される)設計をする。・オレオレカスタマイズはリニューアル時に大きく費用がかかってしまう。・WordPressの作法に則って制作されたサイトは、何度リニューアルしてもコンテンツを維持できる→コストを抑えられる。Handbook、デフォルトテーマのコードを参照して制作する。(正しい実装方法で実装をする)・SEOの基本は利用者の求めている答えをウェブサイトが返しているか、比較したときに選んでもらえるか。・よくある質問を作成する際は、カスタム投稿タイプで1つの質問につき1ページにする。(質問がページタイトルになって重要度が変わる)・よくある質問で問題が解決。→満足度や信頼度が上がり、検索エンジンから評価される。・ウェブ動画は印象や認識、信頼性を高めるために使う。・ウェブサイトへ直接動画を埋め込むのではなく、YouTubeにアップしてサイトへ埋め込む。TOKYOは、WordPressを使ったこれからのサイト制作に関わるセッションが幅広く用意されていたと思います。会場では全国から集まったWordPressに関わる人の数に圧倒されました。Tokyoの各セッションの感想と学んだことです。ゼロから学ぼう!ブロックエディター(Gutenberg)/村上直子さん・WordPressはバージョン5.0からエディターがブロックエディターにに変わった。・ブロックエディターで「複雑なレイアウト」「リッチなコンテンツ配置」ができるようになった。・ブロックエディタ、ブロックを選べば自分の思った通りの表現ができそう。エディタ内に出てくるメニューも見やすくていい。Meetup、WordCamp、WordPress.tv。紘さん・Gutenbergでの日本語入力バク修正の話。・UIでのバグは信頼度に大きく関わる。・(WordPressに貢献するのに)特別なスキルは不要。・OSSは一つのものをみんなでより良くしていく方法。・バグをレポートという形で公式に報告するだけで非常に生産的なやりとりになる。・誰も報告しないからバグが直らない。問題が可視化される・報告されることが重要。・英語/日本語に限らずどんなことでも大切なことは「まず、伝えること」。/しずみさん・今はGutenbergのフェーズ2。これからはコンテンツの外側をカスタムできるようにしていく。(ワードプレスで作られたサイト全体をカスタマイズできるように)・ACFの問題点:標準ではサイト内検索にひっかからない。検索に時間と負荷がかかる。・ブロックエディターに標準で準備されいてるものだけでも便利だが、出力については調整をする必要がある。Filters」で対応。Handbookを読もう。英語でもGoogle翻訳が翻訳してくれる!・立ち止まるくらいなら手を動かそう。デザイナーと情報発信のいい関係/角田綾佳さん・スライドに情報がきれいにまとめられていて、イラストの使い方が上手い!・シェアされたほうがいいことがある。(間違いから勉強できる、シェアされればシェアされるほどファンになってくれる人も増える、正しく伝える練習になる。)・自分が勉強したことを次のひとに渡すことも情報発信。・教えてくれる人、自分、読む人の三方良しがいい!・みんながいることろでちゃんと聞くのも情報発信。・誠実に活動することが大切。武司さん・ウェブフロントではJAMstackという言葉が注目を集めている。・SSGを使うメリットとして、より良いパフォーマンスとスケーリング、高いセキュリティ、良い開発経験を得ることができる。・SSGは比較的に楽に技術習得がしやすい。(例:Vue.jsなど)・フロント開発者技術者がそのまま自分たちの技術を使ってWordPressのフロントを作ることができる。SSGでWordPressの世界がさらに広がる。・WordPressをServerlessにする。WordPressもまだまだ戦うことができる!・WordPressは世界で最も使われているCMSというメリット。Tokyoともまた違う雰囲気のWordCampでした。会場が大学ということで、スクリーンがとても見やすかったです!セッションによっては、立ち見がでるほどの盛況ぶりでした。Osakaの各セッションの感想と学んだことです。WordPressでも大丈夫!実例で見るウェブパフォーマンス改善/Kiteさん・ウェブサイトのパフォーマンスの改善は調査と計測から。Site、WebPageTestなど。中でも具体的に改善内容を出してくれるLighthouseを使って改善。・コーディング無しでできる改善策→使用サーバーを見直す、不要プラグインをアンインストールする、最適な画像形式の選択(色変化の少ない画像にはSVGなど。)、画像の遅延読み込み、キャッシュの見直し、最終的には静的化(例:Shifter)など。・og:imageなどはSVGをサポートしていていないので別途jpgなどを用意する。・サイトのコンテンツが増えるとサイトのパフォーマンスが低下する。・速度を遅くするのも早くするのも人間。・例のサイトを改善するのにトータルで約80〜90時間かかった。・パフォーマンスを保つには設計から運用まで地道に行う。日本語Webフォント10年間の歴史に迫る/関口浩之さん(フォントおじさん)・Webの世界では約20年間フォントが放置されていた。・8年くらい前までまでは書体が自習に使えず、画像で見出しを実装していた。・10年くらい前からウェブ上で色々なフォントがテキストとして表現できるようになった。XPのサポート終了(2014年)、IE8のサポート終了(2016年)・2018年にFONTPLUSはWordPressを使って生まれ変わった。・2017年の秋に「リブランディングをしたい」、「もう一度フォントを身近にしたい」などの思いから生まれ変わることを決めた。・担当が変わったときに手順書だけでなくソースを見ても分かるということからWordPressに。・FONTPLUSのサイトトップはフォントを色々操作できる!(実際に触ってみると面白い!!)・書体の役割は「見やすさ」「読みやすさ」「分かりやすさ」。・書体は感情を持っている。・背景に合わせた書体を置くと書体の存在感が消える。・日本でもコーポレートフォントが増えてきた。・「ブランディング」は今年のキーワード。以降のテーマ作成に向けて、今学ぶべきこと/三木徹さん・ブロックエディターを触っていくうえで、個人的に一番ためなったセッション。・Gutenbergはサイト全体をブロックでやっていくフェーズに既に入っている。・PHPは無名関数の使い方、配列はarrayではなく[]で書くなどに気をつける。・WordPressの使用や歴史や、他の人が使うことを考慮して実装する。・WordPressのコアが出力するクラスはOOCSSやBEMっぽいものが使われいてる。・ブロックエディターでOKでも、フロントでみたときに表示が崩れる場合がある。(その逆も)・フロントエンドとエディタでCSSを分ける。・CSSフレームワークを使うと複雑になる。(ブロックエディターとバッティングする可能性が出てくる)・デザイン上になくても実装が必要なスタイルが多数ある。・ブロックエディターのどこに設定項目を置くかを考えなくてはいけない。・PHPのスキルアップは今すぐ始められる。CSS設計は狭い範囲でスタート、ブロック周りから見直し。ブロックエディターのブロックスタイルは今すぐできる!・まずはブロックエディターを使い倒すことから。(どういうふうに動くか確認してみる)運用も最大限考慮!コーポレートサイトでブロックエディタフル活用の事例紹介/長谷川広武さん・ブロックエディタの登場によってWordPressの設計が変わった。・事例はバカルディジャパンのウェブサイト。Blocksがおすすめ。・カスタムフィールドではなく、カスタムブロックを使えばすべてコンテンツに入る。・カスタムフィールドはイベントの開催日などに使うようにする。・デフォルトのテーマにしても運用できるテーマにする。(「外観」と「コンテンツ」の分離)・カスタムフィールドを使った制作は、作りきりが前提・対応負担の増加・テンプレートが複雑に。Handbookを読もう。・運用で更新頻度の高い再利用ブロックは、抜き出して一覧を用意。・ワイヤーの段階でブロックを確定する必要がある。・ブロックエディターがどんなものがを理解する必要がある。(どんなHTMLが出力されるか、スタイルがついているか)・ブロック間の余白は統一したい。(パターンごとに作るとハマる)・運用も考慮したブロック設計。カスタムフィールドは最小限にする。・APIサーバーとして使うWordPress側にもコンテンツが重複するためAPI側のWordPressはリダイレクト、noindexのなど設定が必要。・JAMstackでWPを運用する際は、フルマネージドなサーバーを検討する。(WordPressやプラグインの更新を行ってくれるサーバー)・運用時、WordPressでの更新はビルドとアップロードをしないと反映されない。→WordPressからビルドを実行する必要がある。Deployments」がある!)・WPのプレビューはWPのテーマで表示されるため、公開前のチェックのプレビューにはビルドが必要。(プレビュービルドまたはローカルビルドをする)・JAMstackなサイトにするデメリットは今までのWPサイト制作と異なるノウハウが必要になること。・JAMstackにする/しないは、案件が向いている/いないを考えて判断する。Osakaで学んだことや感想でした。各セッションの動画はWordPress.tv、スライドは各スライド公開サービスなどで公開されています。WordCampに参加できなかった方も動画やスライドでWordCampのセッションを見ることをおすすめします!3つのWordCampに参加して、改めてWordPressのシェア率の高さとWeb制作現場でのWordPressに対する関心の高さが感じられました。私はWordCampで学んできたことを活かして、これから本格的にブロックエディターに触れてみようと思います!そして、2020年もWordPressについて多方面から学び、そして新たな技術や知識、人と出会うためにWordCampに参加したいと思います。東北公益文科大学で環境サイエンスを学び、卒業後、山形にて自動車用品のECサイト運営および事務業務などに約3年間従事。その後秋田へ戻り、2019年3月よりneccoに参画。未経験から一人前のフロントエンジニアになることを目指して日々勉強中。好きなものは猫、洋楽、小説、お茶。趣味は風呂掃除、アニメ鑑賞、原付に乗ること。2019年、猫を飼い始めました。Niigata、Tokyo、Osakaに参加してきました。マーケティングの秋!開催しました。noteもうインスタ映えスポットに行く必要はない。一緒に「根っこ」を考えましょう。自社やサービス、商品のブランドづくり、商品パッケージデザイン・ロゴデザイン、ウェブサイトについてお困りではありませんか?わたしたちは戦略とマーケティングを起点とした、コンサルティング型のデザイン制作会社です。お客さまのことをnecco(ねっこ)から考え、論理的なブランディング・グラフィックデザインと、ウェブサイト・社内ウェブシステム制作の両軸から事業の課題を見える化し、解決します。まで一貫してお手伝いできることを強みとしています。見えている課題はもちろん、現在見えていない課題抽出からご一緒にはじめていきましょう!CONTACTお問い合わせneccoへのご相談・ご依頼はこちらのフォームよりお問い合わせください。INFO会社案内PDFダウンロードneccoの会社案内資料をPDFにて、こちらからダウンロードいただけます。