いいね❤️を集めるアウトプットをするには

【インプット・アウトプットどうしてる? IN 名古屋】 いいね♥を集める アウトプットを するには Github: junseinagao / Twitter: @junpai_code

自己紹介 長尾准誠 (ながおじゅんせい) 株式会社エイチームライフデザイン所属 Webフロントエンドエンジニア • Next.js x GraphQL (Relay) x Hasura でBtoBtoCなサービスを開発してます • 半年前まではフリーランスでWeb制作とWeb開発を半々でやっていました • プログラミングスクール向けに教材を書き下ろす等の執筆案件もしています JUNSEINAGAO/@JUNPAI_CODE

アウトプットをしてみて こんな経験はありませんか? 記事を書いたら、付いた♥が 0~5 ぐらいだった。 3 0 Storybookの始め方と実装について~Front もいいと思った理由を添えて~

記事の内容は良いこと書いてるのに... Storybookの始め方と実装について~FrontNoteより もいいと思った理由を添えて~ React, storybook StorybookはUI開発には欠かせないツールとなっていきました。 導入をしたこともなければ、ほとんど開発をしたこともなかったのでインプットしておきたいと思い学習を 開始しました。

みんなは♥が来ないことについて どう考えてる? 「あったらうれしいけどなくてもいい」 「有名じゃないからたくさん♥が付かなくてもあたりまえ」 「反応は欲しいけど...」 JUNSEINAGAO/@JUNPAI_CODE

そんな人に私が伝えたいこと 全力で♥を集めに行こう

なぜ私たちは記事を書いたり発信したり (アウトプット)するのか • キャリア形成のため • コミュニティへの貢献のため • 承認欲求のため JUNSEINAGAO/@JUNPAI_CODE

キャリア形成のため 動機の具体的な例 • 転職する時により高い年収レンジを要求したいとか • 社外からの評価を盾に社内の評価面談で給料UPを要求したいとか 思うに • 採用において、求職者の残したアウトプットは大きな評価ファクターになっている • むしろ、経歴以外で技術的な評価を伝えられるのはアウトプットしかない • 良い発信(≒質の高い記事・たくさんのアウトプット)は、良い評価に繋がりやすい JUNSEINAGAO/@JUNPAI_CODE

コミュニティへの貢献のため 動機の具体的な例 • 自分が実装していて詰まったハマりポイントを共有して他の実装者が困らないように したいとか • 新しい設計・実装パターンを共有したいとか • 自分の使ってる技術の情報を増やしたいとか • 会社の発信活動を増やしたいとか 思うに • 「やってみた」みたいな記事執筆も目的はここに入る • このモチベーションで記事を書いてる人は一定数多いと思う(予想) JUNSEINAGAO/@JUNPAI_CODE

承認欲求のため 動機の具体的な例 • 自分の書いた記事につく「いいね♥」が嬉しいとか • 有名になりたいとか 思うに • 自分の意見・まとめた文章に対して好意的な反応があれば誰だって嬉しい。 • 次の記事を書くモチベーションになる。 • 僕はこれです。 JUNSEINAGAO/@JUNPAI_CODE

♥が集まってない記事は 「もったいない」と思う

♥が集まってない記事は「もったいない」 • ♥が集まってない === 単純に記事が読まれてない ということ • 読まれないこと・反応がないことは、アウトプットの目的で ある「キャリア形成のため」「コミュニティへの貢献のた め」「承認欲求のため」に貢献していない。 • せっかく頑張ってアウトプットしてるのに空回りな結果につ ながってしまう JUNSEINAGAO/@JUNPAI_CODE

コスパの良いアウトプットをするために 全力で♥を集めに行こう

♥を集めるには 1. メディアの力を使う 2. ♥を押したくなる記事を書く どちらも大事 JUNSEINAGAO/@JUNPAI_CODE

メディアの力を使う JUNSEINAGAO/@JUNPAI_CODE

記事を投稿するメディアで読まれやすさは違う Zenn Qiita DEV note Hatena Blog Medium 個人ブログ ※ 個人の所感です JUNSEINAGAO/@JUNPAI_CODE

Zenn で♥を集めるハックを紹介します TECH TECH 日本のWEBに革命をもたらす BudouX で自動文字組みを行う。 しかも、Web Componentとして 2021/12/03 125 Next.jsとEmotion & Tailwind (Twin.macro)で環境構築して保 守性の高い快適なマークアップ... 2021/03/25 76 JUNSEINAGAO/@JUNPAI_CODE

Zenn で♥を集めるハック ① 投稿したら 24時間以内に 20♥ほど集める 日本のWEBに革命をもたらす Bud かも、Web Componentとして Node.js Web Components Web # budoux Tech 12 ツイ ! この記事は、大学生限定クリエイティブコミュニティ GeekSalon Adve の記事です。 JUNSEINAGAO/@JUNPAI_CODE

Zenn で♥を集めるハック ② すると、(翌日には) ZennのTrending トップにのる Zenn Trending Following Explore Tech 日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして Junsei Nagao 3日前 6 min read 79 oktetoで無料Kubernetesを遊び尽くす あおい 3日前 13 min read 113 TOP JUNSEINAGAO/@JUNPAI_CODE

Zenn で♥を集めるハック ③ すると、(翌日には) Google Discover にのる Google 検索または URL を入力 ブックマーク リーディング 最近使った 履歴 リスト タブ Discover 【小規模サイト向け】 Next.js ディレクトリ構成と コーディングルール Zenn 2日前 模サイト向け】 Next トリ構成とコーディ JUNSEINAGAO/@JUNPAI_CODE

Zenn で♥を集めるハック ④ すると、Twitterで 有識者が拡散する ← Tweet Kazunori Sato @kazunori_279 Follow douX uses the AdaBoost algorithm tence into phrases by considering ary classification problem to predict ; or not between all characters" Sato _279 Advocate, Google Cloud ons expressed here by my own, not those of my wing 16.9K Followers owed by ITと人権, shiba1000, 44 others you follow 3に革命をもたらす 自動文字組みを行う。しか omponentとして Junsei Nagao Zenn zenn.dev 日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして 11:34 AM Dec 5, 2021 JUNSEINAGAO/@JUNPAI_CODE

Zenn で♥を集めるハック 日本のWEBに革命をもたらす BudouX で自動文字組みを行う。し かも、Web Componentとして 125 ツイート Node.js Web Components Web # budoux Tech Advent Calendar 2021 3日目 TOTAL 125 ♥ 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、⚡の様に 記事 という単 語の 記 と 事 で改行されていたら読みにくいです。 ! この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3日目の記 事です。 GitHubで開く 著者 Junsei Nagao 公開 2021/12/03 文章量 約5,800字 コメント が参加 Junsei Nagao 名古屋のIT会社でWebフロントエンドエ ンジニアやってます。 バッジを贈る JUNSEINAGAO/@JUNPAI_CODE

♥を押したくなる記事を書く JUNSEINAGAO/@JUNPAI_CODE

♥を押したくなる記事(良い記事)を書くために 読む人に100% 寄り添って書く JUNSEINAGAO/@JUNPAI_CODE

♥を押したくなる記事(良い記事)を書くために 表現を工夫する • 読みやすいように適切なコードブロックやheading levelを使う • わかりやすい図やCodeSandboxを入れる 内容を工夫する • 読む人の前提を明確にする • 読む人が得る価値を考える • 読む人の前提で足りないところは説明する これが大事 JUNSEINAGAO/@JUNPAI_CODE

この記事の例に沿って説明します 日本のWEBに革命をもたらす BudouX で自動文字組みを行う。し かも、Web Componentとして Junsei Nagao Zenn WEB BudouX Web Component Zenn JUNSEINAGAO/@JUNPAI_CODE

読む人の前提を明確にする どんな人に読まれたいかを明確にすることで「どこまで説明すべ きか」が明確になります 具体例 • (読んで欲しい人はおそらく)、jQueryのようにCDN経由でJSライブラリは使えるが、 node_modules経由でライブラリを扱うのは難しいと感じている人 JUNSEINAGAO/@JUNPAI_CODE

読む人が得る価値を考える 読んだ後にどのようなアクションを起こして欲しいかを意識しまし ょう 具体例 • Web制作者が今までは扱うのがむずかしかったBudouXを使った日本語の文字組み をWebComponentsを利用して手軽に行えるという知識を得る・手軽に利用できる ようになる。 JUNSEINAGAO/@JUNPAI_CODE

読む人の前提で足りないところは説明する 読む人によって知識のズレや環境のズレがありそうなところは親切 に説明しましょう。 そうしないと • 「途中で理解が追いつかずに読むことをあきらめられてしまう」 • 「何が問題なのか、何が良いのかを理解できなくて、価値を感じられない」 記事になります。 JUNSEINAGAO/@JUNPAI_CODE

具体例 技術を通じて解決できることは何が問題になっているか示す WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、⚡の様に 記事 という単 語の 記 と 事 で改行されていたら読みにくいです。 ! この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3日目の記 事です。 日本のWEBに革命をもたらす BudouX で自動文字組みを行う。し かも、Web Componentとして Junsei Nagao Zenn WEB BudouX Web Component Zenn 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」と う声も無視できません。いわゆる「文字組み」です。例えば、⚡の様に改行を入れてやります。 JUNSEINAGAO/@JUNPAI_CODE

具体例
既存ではどのような解決手法があるか明確にする
これに対応するためには、メディアクエリをくしして画面幅に応じた <br> タグを仕込むか、改行
したくない文字列を手書きで <span style="display:inline-block;"></span> で囲む必要があり
ました。⚡の様に...
<span style="display:inline-block;">この記事は、</span>
><span style="display:inline-block;">大学生限定クリエイティブコミュニティ</span>
<span style="display:inline-block;">GeekSalon Advent Calendar 2021</span>
><span style="display:inline-block;"> 3 日目の記事です。</span>
日本のWEBに革命をもたらす
BudouX で自動文字組みを行う。し
かも、Web Componentとして
Junsei Nagao
Zenn
WEB
BudouX
Web Component
Zenn
もしくは、後に BudouX が変換するように <span style="word-break: keep-all; overflow-
wrap: break-word;"></span> と <wbr> タグを用いて文字列中で改行して良い位置を指定すること
ができます。
JUNSEINAGAO/@JUNPAI_CODE

具体例 わかりやすくどのように使うのか示す しかし、BudouXを使う際に Node.js CLI よりも一番簡単な方法があります。なんと、v0.0.3パッ ケージには、BudouXを使った Web Componentが含まれています！ <script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script> で Web Component を読み込んで 自動で改行処理を当てたい場所を <budoux-ja></budoux-ja> タグで囲むだけです。 <budoux-ja> この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3日目の記事です </budoux-ja> 日本のWEBに革命をもたらす BudouX で自動文字組みを行う。し かも、Web Componentとして Junsei Nagao Zenn WEB BudouX Web Component Zenn JUNSEINAGAO/@JUNPAI_CODE

具体例 どのような環境で使えるのかも示す Web Components はモダンブラウザでは(Safari は怪しいが...)サポートされていますので、これ以 上に簡単で確実な使用方法はないでしょう。 日本のWEBに革命をもたらす BudouX で自動文字組みを行う。し かも、Web Componentとして Junsei Nagao Zenn WEB BudouX Web Component Zenn JUNSEINAGAO/@JUNPAI_CODE

まとめ アウトプットする目的を考えたら、全力で♥を集める記事を書こう • 読まれないことには記事の価値は届けられない。 • 読まれないことには次の記事を書く気力が湧きづらい。 ZennとGoogleのリコメンドを上手く活用すれば知名度がなくても ♥を集められる • とにかく初動に「いいね♥」を集めてGoogle Discoverに載せよう 記事を書くときは、読む人に100%寄り添った記事を書こう JUNSEINAGAO/@JUNPAI_CODE

ご清聴 ありがとうございました いいね♥を集めるアウトプットをするには nagaojunsei/@junapi_code

質疑応答 よくありそうな質問 「Zennに書くってレベルが高く感じませんか?」 「記事を書くためのトピックありきですか?」 「記事を書くために日々の開発で意識していることはありますか?」 いいね♥を集めるアウトプットをするには nagaojunsei/@junapi_code