noterに見てほしい罫線の作り方・使い方＆罫線配布あり（随時更新中）
フジえもんです。罫線の作り方・使い方を共有します。
最後に罫線の配布があります。10枚ほど。ご自由に使ってください。
罫線の仕様に関しては最後の方にありますのでそちらをご覧ください。
まえがき
では、本編スタート。
noteを書かれている皆さん、モノクロのnoteをもっと色鮮やかにして見栄えよく、さらに恰好いい或いは可愛いnoteにしたいと思ったことはありませんか？個性をもっとアピールしたいと思ったことはありませんか？
私、趣味で色彩を勉強していまして、背景が白で、文字が黒というシンプルな配色に疑問を持ちました。なんだか物足りないと思うのは私だけでしょうか。
noteをもっとカラフルにして、クオリティを1UPできないかなぁ。。。
そこで、いろいろnoteをいじっていたら、とある気づきがあり、背景や文字の色を変えられなくてもこうして色を加えることができました！
noteを書いている方にオススメなのは勿論ですが、いつものnoteをちょっと色鮮やかにしたい方、文章と文章の間を何とかしたい！という方にはぜひ使っていただきたいです！
1.罫線の作り方
2.使い方その①～基礎～2月7日に追記
3.使い方その②～応用～3月7日に追記
4.使い方その③～発展～更新予定無し
1.罫線の作り方
はい、これですね。これは高さ5pxの藤色の罫線です。
罫線は画像（jpg,jpeg)で作ることができます。（byGIMP）
※png形式はスマホだと見れないことがあるようです。jpg形式での使用をお勧めします。
作った画像を貼ればそれが罫線として活躍してくれます。（※1pxはスマホでは表示されない模様です。現在、詳細を確認中です。2/7追記。基礎編で詳細を共有しています。）
ちなみに↑の罫線サイズは、1280*5pxです。
横は、ヘッダーに上げる際に適したサイズが1280だったので、そのまま用いました。あとは、高さつまり縦をどれだけの大きさにするかで、線の存在感が変わります。
↑の線は、黒色で縦が10pxです。さっきより存在感が強くなり、そして色味がはっきりしています。
今回はここまでとなります。様子を見て２月から基礎・応用編を追記します。罫線の活用法が知りたいかたはぜひまた読みに来てください。
以下、上記の基礎～発展編になります。
2.基礎(2/7追記）
ここでは、以下の2点について共有します。
①太さについての補足
②色のもつ心理的効果
2.1罫線の太さについて
先日、↓の太さが5pxだとお伝えしました。
そこで、もっと細い罫線を使うことができるかどうか試行してみました。
スマホやタブレット、パソコンなど複数のデバイスをお持ちの方は、ぜひどう変わるのか見比べてみてください。
まずは、1px
次に、2px
そして、3px
さらに、4px
最後に、5px
おまけに10px
どうでしょう？何かわかりましたか？
PCを使っている方であれば、単に太さが変わっただけだと思われるかもしれません。
タブレットについては、PCと同様に見えます。(iPad Air４世代で確認)
スマホで見ると、
iPhone(iPhone SE)の場合は、1pxの罫線が見れず、それ以外はすべて同じ長さ、違う太さで見えます。
Android(Xperia XZ)の場合は、1~2pxの罫線は短く、画面幅の60%ほどの長さになってしまいます。太さはそれぞれ異なって見えます。
つまり、スマホと他デバイスでの見え方が違うということになります。機種によっては、罫線として使えないパターンがあることがわかりました。
なので、罫線の下限は3pxだと捉えてよいでしょう。上限については、10pxもあれば十分だと思います。あくまでも、空間を仕切るための道具であり、モノクロの世界に色彩をもたらすためのアクセントなので。
2.2罫線無料配布＆色のもつ印象
赤・ピンク・橙・黄・緑・青、紫の有彩色６色と白・灰・黒の無彩色３色のイメージについて共有します。
それから、罫線をダウンロードできるようにしてあります。
ダウンロードしていただき各自でご自由にお使いください。
(サイズは1280*5px)
色のイメージの話は有名なので、キーワードだけ簡単にまとめておきます。詳しくは各自で調べてみてください。
赤→情熱、愛、活動的、警告。興奮する色、派手、暖色、進出色。
赤 #ff0000 5px jpeg
ピンク→幸福、優しい、かわいい、恋。やわらかい色。
ピンク #f09199 5px jpeg
橙→明るい、楽しい、活発、暖かい。派手、暖色。
橙 #ffa500 5px jpeg
黄→希望、喜び、明るい、前向き、注意。興奮する色、派手、膨張色
黄 #ffff00 5px jpeg
緑→健康、平和、生命、癒し、若い。派手。
緑 #00ff00 5px jpeg
青→冷静、冷たい、信頼、誠実。後退色、収縮色、派手。
青 #0000ff 5px jpeg
紫→高貴、神秘、和風、優雅。派手。
紫 #ff00ff 5px jpeg
白→純粋、清潔、新しい、無垢。膨張色、軽い色。
白 #ffffff 5px jpeg（※白は背景と同化するためすぐには気づかれません。実は無料部分にて２回使っています。探してみてください。工夫次第で使えるかと。）
灰→控えめ、渋い、中立的、曖昧、洗練、都会的。地味。
灰 #808080 5px jpeg
黒→強い、高級、シック、クール、威圧的、畏怖
黒 #000000 5px jpeg
基礎はここまでです。（2/7追記）
3.応用編～挨拶罫線作ってみたので配布します（3月7日追記）
応用編！ということで罫線をもっと楽しく気軽に使えるように挨拶罫線を作ってみました！
ただの画像はつまらないので、動く罫線を作ってみました！（GIF）
（GIFの作り方は需要があれば後日追記・別記事にて共有しますので、知りたい方はコメントください。）
ということで、早速どうぞ！
※一日１０枚までしかダウンロード画像を用意できないので、今週は、動く罫線を追加します。来週は動かない罫線を配布予定。
結構量が多くなりそうなので朝/昼/晩/その他に分けて別記事にて配布した方がいいのかなあ。ただあちこち飛ぶのも面倒だと思うんだよなあ…
ちょっと考えてみます。何か意見があればコメントください！
以下、私が使いたい挨拶罫線になりますが、他に欲しい、必要な挨拶の言い回しがありましたらコメントで「『挨拶文』が欲しい」といただければ随時ご用意させていただきます。
サイズは２種類用意しますので好きな方をお使い下さい。
折角なら遊び心を、と思いドラクエでお馴染みのフォントを使ってみました。ドットフォントが懐かしいと思う世代の方もいらっしゃるのではないでしょうか。
朝は「おはようございます!!」
①背景白/文字黒。ドラクエフォント。1280*40px
①の反転色。他同上。
②背景白/文字黒。ドラクエフォント。279*40px
②の反転色。他同上。
③背景白/文字空。ドラクエフォント。279*40px
④背景白/文字黒→橙（市松）。ドラクエフォント。279*40px
⑤背景白/文字空→虹（ビビット。グラデ）。ドラクエフォント。279*40px
⑥背景空/文字橙。游明朝フォント。1280*40px
昼は「こんにちは!!」
①背景黒/文字白。ドラクエフォント。500*40px
②背景白/文字黒→橙（市松）。ドラクエフォント。500*40px
夜は「こんばんは!!」
後日追記します。
あとがき
参考になったよ～って方はぜひスキ、オススメしてください！
また、罫線画像を使っていただいた際には、 #罫線 #フジえもん と付けて頂ければスキしに行きます！或いは、本記事を取り上げてくだされば同様にスキさせていただきます。
もし、他に希望する色、サイズ、挨拶文があれば別記事にて配布を検討しますのでコメント欄かTwitterのDMに書いていただければ幸いです。
３月に、応用編を追記します。乞うご期待。
以下更新ログ（2021/2/13からログを残します）
2021/2/13更新
・有料化→無料化
2021/3/7更新
応用編を追記（挨拶罫線）
2022/5/22更新
記事の一部編集
いいなと思ったら応援しよう！
