YouTubeヘッダー画像のサイズは2560×1440ピクセル。チャンネルアート作り方2018

チャンネルアートの作り方

2018年8月時点での、YouTubeチャンネルアート(ヘッダー画像)の作り方をまとめます。

チャンネルアートっていうのはコレですね。
YouTubeチャンネルアート:わかばちゃん
アイコンの横の背景、つまりヘッダー部分のことです。

どこから変更できるのか

右上の自分のアイコンをクリックし、画像のとおり操作します。
YouTubeヘッダー変更

チャンネルアート(ヘッダー画像)の右上の鉛筆マークをクリックし、編集に入ります。
Image from Gyazo

推奨サイズは2560×1440ピクセル

チャンネルアートの推奨サイズは2560×1440ピクセルです。
それ以下のサイズの画像(幅1200ピクセルぐらい)をアップロードしようとしたら、サイズが小さすぎると言われ拒否されてしまいました。

というわけで、推奨サイズで筆者が作った画像
Image from Gyazo
パソコンのほか、スマホでも閲覧されるので、どんな形式でも大丈夫なように、真ん中に見せたいイメージが来るように作るとよいです。

画像ソフトはPhotoshopやクリップスタジオなど、あなたが普段使っているものでよいでしょう。

画像をアップロードしたら、こんな感じでプレビューが表示されます。
Image from Gyazo

表示位置の調整はしなくていいみたいですね。
問題なければそのままボタンを押して確定します。

完成

Image from Gyazo

これで、Youtubeのヘッダー画像が変更できました!

チャンネル登録よろしくね

Image from Gyazo
[初心者系VTuber 「いろは わかば」のYouTubeチャンネル https://www.youtube.com/channel/UCky-Q8NPjoohScbfrKU6AWA]

初心者系VTuber「わかばちゃん」のチャンネルです。
Web制作・ゲーム制作などのテック系を中心に、いろんな技術に挑戦していくよ!

原作/イラスト/マンガ/モデリング:湊川あい

マンガでわかりやすく学べる「わかばちゃんと学ぶ」シリーズ

超初心者のわかばちゃんと一緒に、HTMLやCSS、バージョン管理システム「Git」、アクセス解析ツールの「Googleアナリティクス」を、マンガでわかりやすく・楽しく学べるシリーズです。

湊川あいのWeb連載

CLIP STUDIOで技術系同人誌を作ろう! 原稿作成→データ入稿までの一連の流れを公開

技術系同人誌 Advent Calendar 2017 18日目

技術系同人誌 Advent Calendar 2017 18日目担当として、CLIP STUDIOで技術系同人誌を作るときの流れをまとめます。

はじめに

技術系同人誌というと、Re:VIEWを使って書いている方が多いと思います。
テキストメインの場合、Re:VIEWは大変便利ですが、「文字よりも図解が多い」「マンガを挟みたい」場合は「CLIP STUDIO」を使うのがオススメです。

CLIP STUDIOは、さすがマンガ制作用ソフトだけあって、図解を書きやすいですし、印刷所にラクにデータ作成・入稿できます。

今回の記事では、Webデザイナー・マンガ家・技術書執筆をしております湊川あいが、技術書同人誌を作るときどのような工程で作っているのかを共有したいと思います。

1. 環境

CLIP STUDIO PAINT EX

湊川はCLIP STUDIO PAINT EXを使っています。

CLIP STUDIOとは、マンガに特化したイラスト制作ソフトで、その使いやすさから最近だとアニメ制作にも使われています。
値段も良心的なので、いちからデジタルイラストを始めたいという人にもおすすめです。

iPad版もリリースされたようなので、iPad Proをお持ちの方はアプリ版を使うという手もありますね!

絵を書くためのデバイス

液晶タブレットかペンタブレット(板タブと呼ばれているもの)をパソコンに繋いで使います。
どの機種が合うかは個人差があるので、まずは家電量販店で試し書きしてみるのがよいでしょう。

  • 肘から動かして絵を描く人 →大きめのインチ
  • 手首だけ動かして描く人 →小さめのインチ

湊川は手首で描くタイプなので、大画面だと逆に描きづらくなってしまいます。よって、小さめの液タブWacom Cintiq 13HDを使っています。

↑こちら、Amazon上でCLIP STUDIO EX付きの割安セットも選べるので同時購入を考えている方はオススメです。

2. 仕上がりサイズとページ数を考える

CLIP STUDIO PAINT EXを立ち上げ、上部のメニューから[ファイル] > [新規]をクリックします。

ページ数を考える

仕上がりサイズをA5にするか、B5にするか決めます。
「A5ってどれくらい?」と思う方は、A4用紙を半分に折るとわかります。

A5ってこれぐらい

書籍「わかばちゃんと学ぶ」シリーズはA5です。
わかばちゃんと学ぶシリーズはA5

B5ってこれぐらい

B5は、同人誌でよくあるサイズといえば伝わりやすいでしょうか。結構大きいです。
設定資料集はB5

私は、図解解説はA5、設定資料集などの絵を大きく見せたいものはB5にしています。

ページ数を決める

ページ数は基本的に8の倍数で考えます。

  • 16ページ
  • 24ページ
  • 32ページ 
  • … 

表紙・裏表紙は別で換算します。
表紙・裏表紙は印刷用語で「表1・表2・表3・表4」の計4ページぶんになります。
表1って何?と思った方はこちら

たとえば本文24ページの冊子を作りたい場合、「本文24ページ・表紙込みで28ページ」となります。
ページ数によって印刷費が変わってくるので、印刷所さんのWebサイトをよく確認しましょう。

.cmcファイル

冊子の設定を終えると、「.cmc」という拡張子のファイルができて、こんな感じで連番でページを埋めていくことができます。
(原稿ページ管理機能はCLIP STUDIO PAINT EXだけの機能です)

ページの並び替えもドラッグ&ドロップでできてラクチン!
cmc.png (93.7 kB)

3.全体の構成を考える

どんな項目を入れるかを箇条書きで考えます。

4. プロットを考える(マンガがある場合)

全体の構成の中でも

  • そもそもの場面設定の部分(どういうキャラクターが、どういう状態にあるのか?)
  • 特に力を入れて説明したい部分

をマンガにしていきます。

5. ネームを切る

プロットをマンガに当てこんでいきます。

6. 下書き→ペン入れ

ネームに沿って下書きします。
私の場合は、下書きであることがわかるように青い線で書いています。

マンガ下書き (103.9 kB)

下書きが終わったら、下書きレイヤーの透明度を20%ぐらいに下げ、その上のレイヤーから黒い線でペン入れしていきます。

最後にベタを塗る→トーンを貼る→一番上のレイヤーにホワイトを乗せて仕上げます。

マンガ仕上げ (103.9 kB)

8. テキスト

clipst.png (105.6 kB)

フォントはそれぞれこだわりがあると思うので一概には言えませんが、私が試した中では

  • テキスト部分:F910新コミック体
  • コマンドやソースコードの部分:Osaka

がしっくりくるので、よく使っています。

9. 仕上げに、メモ書きを書き入れたりする

ここがCLIP STUDIOで技術書を作るときの一番のメリットではないかと思うのですが、このように手書きで注釈を入れることで「手書きのノート風」にできるのです。

魔王教授と学ぶGitコマンド入門より

イメージとしては、友達のノートを見ているような感じでしょうか。
CLIP STUDIOだからこそできるこのスタイル、私は結構好きです。

10.いよいよ入稿!

私が普段使っている印刷所さんはサンライズパブリケーションさんです。
対応が丁寧ですし、入稿用のWebフォームもわかりやすいです。

サンライズパブリケーションさんの会員ページはこんな感じ

kaiin.png (103.9 kB)

再版も簡単

saihan.png (46.8 kB)

入稿形式

PSDファイルで書き出して、ZIPファイルにまとめておきます。

表紙は、テンプレートが用意されているので、それに当てこみます。

サンライズ表紙テンプレート

11. サンライズさんのWebフォームからデータを送って完了です

入稿しました

早めの入稿で20%割引

サンライズ割引
ちなみにサンライズさんには「レスキュー」っていうプランもあるけど35%”割増”です。
レスキュー……。

告知:表紙イラスト担当しました

おやかたさん 編の「技術同人誌を書こう! アウトプットのススメ」の表紙と、一部文章を担当させていただきました。
Re:VIEWの使い方から印刷所の手配、当日の準備物まで網羅した、258ページを超える分厚い本になっています。

ワンストップ!技術同人誌を書こう
技術同人誌を書こう! アウトプットのススメ | 出版社:インプレスR&D

Kindle版と冊子版とがお選びいただけます。
Amazonで好評発売中!

おわりに

この記事が「CLIP STUDIOを使ったことはないけど、図解や挿絵がたくさん入った技術書を描いてみたい」という方の参考になれば幸いです。

明日はfinapさんです!よろしくお願いします。

関連リンク

GitHub・Bitbucketの使い方は、こちらの書籍で解説しています。


C4XnLc6UoAAJNrS

「わかばちゃんと学ぶGit使い方入門」

Web連載

著書

GitHubでフォークしたリポジトリを本家リポジトリに追従させる方法:SourceTree

わかばちゃんと学ぶGit使い方入門の読者の方から、以下のような質問をいただきました。

プルリク練習用リポジトリにマージありがとうございます。
ところで、自分の所のフォークは更新されないんですね。どうやってするのですか?

以下、回答です。

本家リポジトリ追従方法

GitHubでフォークしたリポジトリを、本家リポジトリに追従させたいということですね!
では画像付きで解説しますね。

ゴール

  • 本家リポジトリ
  • 自分のローカルリポジトリ
  • 自分のリモートリポジトリ

上記3つのmasterブランチの状態を揃えることをゴールとして操作していきます。

今こんな状態だと思います

本家リポジトリで新しく追加されたコミットを取り込みたいが、フォークした自分のリポジトリは、古いままで止まっています。

本家リモートリポジトリを登録する

自分の手元のローカルリポジトリに、本家リモートリポジトリを紐づけます。左メニューの「リモート」を右クリック→「リモートを追加」をクリックします。

リモートリポジトリの名前(なんでも好きな名前をつけてOK、この例ではupstream)と、本家リポジトリのGitリポジトリURLを入力します。
書籍練習用のGitリポジトリURLは https://github.com/elmas3/pull-request-practice.git です。
(GitHub上でclone or downloadボタンをクリックした時に出てくるURLです)

OKを押すと、本家リポジトリ(書籍の中で言う、エルマスさんのリポジトリ)が追加されました!

本家リポジトリからローカルリポジトリにプルしてみる

左メニューの「リモート」欄に、「upstream」が追加されました。右クリックして「upstreamからプル」をクリックします。

このような画面が表示されます。1→2→3の順にクリックします。
これは「エルマスさんのリポジトリのmasterブランチから、ローカルリポジトリのmasterブランチへプルするよ〜」という設定です。

プルできた!

本家リポジトリ(エルマスさんのリポジトリ)からローカルのリポジトリにプルできました!

あとはプッシュすればOK

あとは、自分のローカルリポジトリから自分のリモートリポジトリにプッシュするだけです。

これで、

  • 本家リポジトリ
  • 自分のローカルリポジトリ
  • 自分のリモートリポジトリ

上記3つのmasterブランチの状態が揃いました!

対応書籍

Windows版SourceTreeがVer 2.1系列になって、ローカルリポジトリの作り方がわからなくなった方へ

ローカルリポジトリの作り方がわからない問題

「わかばちゃんと学ぶGit使い方入門」の読者様より、
Windows版SourceTreeのバージョンが上がり、書籍発売時とはUIが変わったため、ローカルリポジトリの作り方がわからないという質問をいただきました。

以下に、SourceTreeのバージョン2.1系列の、ローカルリポジトリの作り方を載せますのでご参考になれば幸いです。

ローカルリポジトリの作り方

キャプチャ画像は、クリックで原寸大に拡大できます。

1. 書籍50ページの②の画面

「わかばちゃんと学ぶGit使い方入門」 50ページで「ファイル」→「新規/クローンを作成する」をクリックしたところからのスタートです。

2. リポジトリを作るので「Create」をクリック→「Browse」をクリック

beta_No-12

3. sampleフォルダを選択

beta_No-13

4. 「作成」クリック

beta_No-14

5. リポジトリができました!

beta_No-15

これ以降のステージ・コミットの操作は、多少UIが違うものの基本的には同じように使えると思います。

何かわからないことがあれば @llminatoll までどうぞ。わかる範囲で回答させていただきます。

マンガでわかるGitが書籍になりました

わかばちゃんと学ぶGit使い方入門

書店さま・Amazonなどにて大好評発売中です!


C4XnLc6UoAAJNrS

「わかばちゃんと学ぶGit使い方入門」

正式公開されたGoogleの「Cloud Source Repositories」を使ってみた

gccap_001

Google製Gitリポジトリのクラウドサービスが正式公開

Google、「Cloud Source Repositories」正式公開。Gitベースのソースコード管理ツール、5ユーザー、50GBまで無料

おお〜これはGitHub・Bitbucket・VisualStudio・GitLabに次ぐサービスになりそうです。
さっそく使ってみましょう。

正式公開されたGoogleの「Cloud Source Repositories」を使ってみる

驚いたのが、「GitHub/Bitbucketからの自動ミラーリング」ができること。

わかばちゃん
ためしに、GitHub上のリポジトリをCloud Source Repositories上にミラーリングして、クローンしてくるところまでやってみよう!


1.GitHub→Cloud Source Repositoriesにミラーリングしてみる

登録する

こちらから「使ってみる(無料)」をクリックして登録します。
Cloud Source Repositories
https://cloud.google.com/source-repositories/

新規リポジトリを作る

Cloud Source Repositories上に、適当な名前でリポジトリを作ります。
gc01

普通に新規リポジトリを作ることもできますが、せっかくなので「GitHubまたはBitbucketからの自動ミラーリング」を試してみることにします。
gc02_a

クリックひとつでGitHubからミラーリング!

GitHubへのログインを求められます。
その後、すぐにGitHubリポジトリ一覧が表示されました。 あとは自動反映させたいリポジトリをポチッと押すだけ。
カンタンな上に、動作がめっちゃ早い。
gc03

ミラーリングされてきたリポジトリを選択すると、ファイル一覧が閲覧できます。
gc04

コミット履歴もコピーされてくる

わかばちゃん
この無駄なものを省いたシンプルなUI!
Googleっぽくて好きかも。


1.Cloud Source Repositories→自分のパソコンにクローンしてみる

さて、Cloud Source Repositoriesからクローンしてこようと思ってGoogle公式ドキュメントを確認したところ、どうやらgcloudというコマンドを使っているようでした。

gcloudコマンド群をインストールする

コマンドラインを開いて以下のように打ち、エンターを押します。

$ curl https://sdk.cloud.google.com | bash

インストールが始まります。
途中質問が入りますが、詳細については、以下の記事が詳しいです。
GCPのgcloudコマンドをインストールする:Qiita

PATHを通す

PATHを通すというのは、コマンド検索パス(コマンドサーチパス)を追加することです。
「コマンドのありかを登録する」イメージですね。

たとえば、「pwd」というコマンドがどこに置いてあるかを知りたかったら

which pwd

と打つと、/bin/pwd と出てきます。
これで、pwdコマンドは、/bin/という場所に置いてあることがわかります。

今回はgcloudコマンドを使えるようになりたいので、以下のようにPATHを登録してあげます。
(”wakabachan”の部分は、あなたのパソコンのユーザ名)

$ export PATH=$PATH:/Users/wakabachan/google-cloud-sdk/bin/

ちゃんとgcloudコマンドが使えるようになったか、gcloudのヘルプコマンドを打って確認してみます。

$ gcloud -h

gc08

ヘルプが表示されました。バッチリですね。

gcloudで認証

gcloud initというコマンドで、Googleアカウントにログインします。

$ gcloud init

Googleクラウドプラットフォーム上に存在するリポジトリをクローンしてくる

$ gcloud source repos clone [クラウド上のリポジトリ名] [クローン先のローカルのディレクトリ名]

なんかめっちゃ長いコマンドですけど
Google公式ドキュメントによると

“gcloud source repos clone コマンド”は、Cloud ソース レポジトリを origin という名前のリモートとして追加し、それを [LOCAL_DIRECTORY] 内にあるローカル Git レポジトリ内にクローンを作成します。

とのこと。

つまり、クラウド上にある「foo」という名前のリポジトリを、「bar」というローカルディレクトリにクローンしてきたい場合は

$ gcloud source repos clone foo bar

と書けばいいわけですね。

わ〜いクローンできたよ

クローンできました!

gc06

ディレクトリを開いてみてもバッチリ。
gc07

これで、GitHub → Google → 自分のPC という経路でクローンできました。

あとは普通にgit pull・git pushして使えます💪

プライベートリポジトリ 5ユーザーまで無料ですし、こうやってカンタンにGitHub・BitBucketの内容をミラーリングできるので、第二・第三のバックアップ場所としてもよいかもしれませんね。

わかばちゃん
なるほど〜
いかにも分散型って感じの使い方ができそうだね!


参考資料:

この記事は、MacOSX・2017年5月26日時点での操作内容です。環境・時期により操作が異なる可能性がございます。

GitHub・Bitbucketの使い方は、こちらの書籍で解説しています。


C4XnLc6UoAAJNrS

「わかばちゃんと学ぶGit使い方入門」

GitHub上でプルリクを出す方法:「Compare & pull request」のボタンが見当たらない場合

GitHubで「Compare & pull request」のボタンが見当たらない

「わかばちゃんと学ぶGit使い方入門」の読者様より、
GitHubで「Compare & pull request」ボタンが見当たらないという事例を報告いただきました。
どうやらタイミングによって「Compare & pull request」ボタンが表示されないことがあるようです。

以下に、「Compare & pull request」のボタンを使わないGitHub上でのプルリクの出し方をまとめましたので、参考にしていただけますと幸いです。

プルリクの出し方

キャプチャ画像は、クリックで原寸大に拡大できます。

1. 書籍152ページの状態

「わかばちゃんと学ぶGit使い方入門」 152ページで、add-myfileブランチをプッシュしたところからの解説です。
pr01

2. ブラウザでGitHubのリポジトリのトップページを開き、「New pull request」タブをクリック


pr010

3. プルリクエストに出すブランチを設定する

左に合流先のリポジトリとブランチ、右に自分のリポジトリとブランチが表示されます。
一番右の、compare:欄を、「add-myfile」ブランチに設定します。
「Create pull request」ボタンをクリックします。
pr04

4. メッセージを書いて「Create pull request」ボタンをクリック

pr05

これでプルリクエストが出せました!

わかばちゃんと学ぶGit使い方入門


C4XnLc6UoAAJNrS

「わかばちゃんと学ぶGit使い方入門」