![見出し画像](https://assets.st-note.com/production/uploads/images/156740318/rectangle_large_type_2_5b6d952fd570fc43b8cffd405d5e2472.png?width=1200)
リットリンクであなたらしいページを作ろう!【画像リンクの作り方】
こんにちは、クリエイターかしんです🌼
今回はリットリンクをリニューアルしたよ、というお話。
自分のSNSリンクをまとめたページをつくりたい。でも難しいのでは?
と思っている
リットリンクはすでに使ってるけど、
整理したいなー、もっと自分らしくしたいなー
と考えていた
そんな方にオススメ記事です。
リンク集をサクッとつくろう
みなさん、リットリンク(Lit.link)をご存知ですか?
SNSやYouTube、ブログなど、複数のリンクをひとつのページにまとめて表示できる便利なサービスです。
![](https://assets.st-note.com/production/uploads/images/156701741/picture_pc_c9754481b836c2b6778e88b02e1a2a03.png?width=1200)
操作も簡単でスマホでもすぐに作れます!
![](https://assets.st-note.com/production/uploads/images/156701844/picture_pc_6ac65dc73e6167127b0649da499345b4.png?width=1200)
「手の込んだサイト制作は難しそう、でも手軽に自分の情報をまとめたwebページを作りたい」
という方におすすめサービスです。
画像リンクへ変更して自分らしいページづくり
わたしは最近リットリンクのページをリニューアルしました!
元はデフォルトのSNSアイコンボタンを使っていましたが
リンクボタンをオリジナルの画像に差し替えました!
こんな感じです🔽
![](https://assets.st-note.com/production/uploads/images/156732059/picture_pc_a94328ab4930e85e06eecbe434c483dd.png)
リニューアルの理由はリンク先が増えたから
リットリンクを使いはじめた頃は、SNSリンクを4つほど載せて、シンプルなデザインのリンクボタンを使っていました。
でも、だんだんと
目的別SNSのリンク
出版したKindleリンク
LINEスタンプのリンク
自分のホームページのリンク
と、リンク先が増えてきました。
そうなると
「このリンク先は一体なんなのか、ユーザーには伝わらないページ」
になってしまいました。
そこでリンクボタンをシンプルなアイコンから、画像に変更することに。
画像を多く使うことで、
自分の活動や人柄
作風
リンク先に飛んだらどんなページなのか
など、パッと見て雰囲気が分かるようにしたいと思ったからです。
いきなり作り出す前に!情報を整理
何の情報の整理がついていないまま
いきなりサイトを作り出すと迷子になりやすいですよね。
そこで、載せる情報を以下の視点で整理しました。
なんのリンクを
どんなカテゴリで
どんな順番で載せるか
どんな文言で紹介するか
![](https://assets.st-note.com/production/uploads/images/156599244/picture_pc_916b4d8c564e82cd4477671f8a3426df.png?width=1200)
ちなみに実際の仕上がり画面がこちら🔽
![](https://assets.st-note.com/production/uploads/images/156599293/picture_pc_1e91322023f01a5c50edd4d6f68dd6d7.png?width=1200)
Canvaで画像をつくる
情報整理ができたら、
いよいよ画像制作です。
今回のリンク用画像はCanvaで作りました。
ここはお好きなツールやサイズで良いと思います!
参考までに、わたしの作った画像のサイズをご紹介します。
大きめ画像のサイズ
1600 x 900
大きいフォントは116px
![](https://assets.st-note.com/production/uploads/images/156599426/picture_pc_ea64d4b96d02b51b3031e8082768cfcf.png?width=1200)
細長タイプの画像サイズ
2000x 600
大きめフォントは140px
![](https://assets.st-note.com/production/uploads/images/156599434/picture_pc_f67c47d06dbcf8b96f69dd9e6429aeb3.png?width=1200)
見た目について
同じ雰囲気の画像が連続しすぎると、ユーザーは画面に飽きてしまいますよね。
つい読み飛ばして、ささーっとスクロールしてしまったり。
そこで
SNS
Kindle
販売導線
など、カテゴリごとに画像の見た目を変えてみました。
![](https://assets.st-note.com/production/uploads/images/156702700/picture_pc_9865e68e9b89025ffbdadc87f189b2c4.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/156702760/picture_pc_d0b4bdb60472fe0337719c27c39ca001.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/156702772/picture_pc_dc177e3a2317629f716b7e8d268c9306.png?width=1200)
ただし、
あまりに各カテゴリの世界観が変わりすぎると
ひとつのページとしてまとまりがなくなるので 一体感も大事にしたい。
そこで、
画像サイズやフォントは揃える
あしらい(外枠)のデザインだけ変える
を意識しました。
いよいよリンクページを作る
画像が作れたらいよいよリットリンクを操作。
自分でwebページを作るのは難しそうに思えるかもしれませんが、大丈夫。
リットリンクは初心者でも使いやすく、操作もシンプル。
デザインも簡単にカスタマイズできるのが魅力です。
タブを【編集中】に切り替えて編集モードに
まずは編集モードにして、画面編集できる状態に。
![](https://assets.st-note.com/production/uploads/images/156599172/picture_pc_7eb06dbaa9f102f7fa500244b219a4ad.png?width=1200)
画面の一番下に【リンクを追加】がでてきます。
今回は自分で作った画像を使いたいので、
ピクチャを選択
![](https://assets.st-note.com/production/uploads/images/156599336/picture_pc_4b818d3d1065dbe6db83d2f355b0c5e7.png?width=1200)
今回は、横幅いっぱいに表示される画像リンクを使いました。
※3つや4つと複数横に並べることも可能
目的によって使い分けます
写真マークを押して、入れたい画像を選びます。
![](https://assets.st-note.com/production/uploads/images/156599362/picture_pc_affe6a4bf8fa4b7b2c35a628de6ba509.png?width=1200)
リンク先を指定
下の白いボックス内には、リンクをいれます。
SNSを指定してアカウント名を入れる方法と
直接URLを入れる方法があります。
![](https://assets.st-note.com/production/uploads/images/156599398/picture_pc_85f53aaffde63b1c1d4de5f6944d8767.png?width=1200)
余白もつけよう
リンクが配置できたら、完成までもう少し!
リットリンクには【余白を追加】の機能があります
3種類のサイズから好きな余白を選んで、要素と要素の間に配置できます。
![](https://assets.st-note.com/production/uploads/images/156736044/picture_pc_0779115eed7fe1ba0c7181ed83d6a6db.png?width=1200)
画面に情報だらけだと、見る人はだんだん疲れてしまいます。
ぎゅうぎゅうな画面には要注意。
そこで、余白をうまく使って
見る人が息継ぎができるような「間」を作ってあげる
分類が違う情報は余白を置いて遠ざける(区画整理のようなきもち)
を意識できるといいなと思いました。
![](https://assets.st-note.com/production/uploads/images/156736566/picture_pc_79c58d6b445a3eaec4d3ee00fa318448.png?width=1200)
順番の入れ替えも楽!
編集モードの状態で、要素の真ん中上にあるマークを長押ししたら移動ができます。
下の方に配置したリンクを「やっぱり先頭に持っていきたい」なんてときも
ささっと順番を変えられますよ!
![](https://assets.st-note.com/production/uploads/images/156736933/picture_pc_d8f923b60780d9c570644a2b38350369.png?width=1200)
手軽にリットリンクをはじめてみよう
自分のSNSや作品をまとめたページを作りたい時は、
リットリンクをぜひ試してみてください。
デフォルトのボタンだけでもシンプルでおしゃれなページを作れます。
より自分らしいページを作りたいと思っている方には画像リンクを活用するのもオススメ。
簡単なので、あなたもぜひ挑戦してみてください!
今回はここまでです
参考になっていたら「スキ」やフォロー、拡散いただけたら励みになります!
かしんのリットリンクページもみていただけたらうれしいです!🔽🔽
SNSやKindleなどの情報をまとめています!
読んでいただきありがとうございました!
それではまたお会いしましょう!🌸
いいなと思ったら応援しよう!
![かしん|可視化のかしん](https://assets.st-note.com/production/uploads/images/88838275/profile_aa30e319df5f9ad5d8b6e9d1f0adc617.png?width=600&crop=1:1,smart)