content【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にするGitGitHubMarkdown新人プログラマ応援こんにちは、アオカトレア(@aocattleya)です。就職活動をするにあたってポートフォリオを誰にでも分かりやすく伝える為に、リポジトリの説明であるREADME.mdをカッコ可愛く見せられないか試行錯誤したので共有します。最近はGitHubで採用をしている会社さんもあるので是非分かりやすく力を入れたい所です。リポジトリを見てくれても分からない物を丁寧に構築して確認してくれる可能性は低いです。エンジニアを目指している人など凄いアプリを作っている人はいますが、READMEを書いていない人が多く、しっかり見てもらえているのか私はずっと気になっていたのでまとめました。以下、私のリポジトリにあるアプリのREADME.mdを一部紹介します。ラーメンタイマーアプリの雰囲気に合わせてかっこよく可愛くしてみた。書籍管理アプリ緑をベースに目立ち過ぎずにアプリの仕組みを伝えたい。ECサイトポップな雰囲気で紹介、画像アイコンはGitHubプロフィールのURLを参照しているのでアイコンを変更すると自動で切り替わります。今回は、上記のラーメンタイマーを使用してREADME.mdを魅せる解説をしたいと思います。作成したアプリの種類など雰囲気に合わせて書くのが良いです。書く時はプレビューが見やすいGitHub上で編集しています。自由ですが、主に以下を書くのが望ましいです。構築やインストール方法ライセンス作者README.mdは、マークダウンという形式で書く事が出来ます。知らない人でも簡単に慣れると思います。issueをクリックして画像をドラック&ドロップするとリンクが作成されるので、URLだけ貰ってIssueは保存せずに閉じます。あとは、そのURLをマークダウンに貼り付けます。ラーメンタイマーでは、ラーメンタイマーアプリのREADME.mdを使って解説します。使用技術Gif画像なので実際はタイマーアプリを動かしているデモ動画です。ポイントは、最初に全体が分かる画像を置いている事によって、一目でどんなアプリか分かるようにしています。使用技術ですが、ちょっとやり過ぎ感がありましたが画像で紹介してみました。それぞれクリックすると公式サイトに飛ぶようにしています。/></a></p>マークダウンには、簡単な物ならHTMLっぽく書けるのでこれを利用して中央寄せなどを実現します。(実際は位置調整の為に空白入れたりもうちょっと汚い)サイズは、widthなどで指定できます。こだわり部分アプリを公開している場合は、URLを書きます。使い方は、今回直感的に分かる物なのでローカルに持ってくるGitコマンドを書いていますが、ログインするテスト用アカウントがある場合などアプリごとの使い方を分かりやすく書きます。構築方法は、Railsの場合一例を書くと下記のような感じでしょうか。http://localhost:3000機能アプリのこだわりポイントを書くのはオススメです。頑張った機能ならば見てほしいはず。良いと思いやり過ぎ感を出すと逆に見辛くなるので客観的に見るよう心がけましょう。作者ライセンスというのは自由に使ってください〜などの明記です。templateというテンプレートボタンが出てきます。ライセンスの種類については必要に応じて調べてみてください。SHEET(Gist)好みなので、雰囲気に合わせて使用してください。かっこいいので参考にさせていただきました。まとめ個人的に、GitHubへ素晴らしいアプリを載せていてデモなど分かりやすい状態にしているリポジトリを見ると「おおっ!」となります。README.mdをかなり意識していました。周りのポートフォリオに力を入れている駆け出しエンジニアさんなど凄いアプリを作っているのをよく見ますが、リポジトリに行ってもREADMEが書かれていないと詳しい内容が把握しづらく相手に伝わるのかな..とモヤモヤしていました。今回ポートフォリオ視点で記事をまとめてみました。素晴らしいアプリの魅力を色んな人に伝わるようにしてみましょう!リンク記事のいいね!など貰えたらとても励みになります。requestStockLike1017aocattleya@aocattleyaいいね👍やコメント貰えると嬉しいです・v・趣味と独学でフロントエンドを主軸にWeb技術を学んでいます。upLoginユーザーは見つかりませんでした。