はじめてのロゴやアイキャッチ画像制作
個人ブログを読むアプリ、こぶりー（https://kobliy.vercel.app ）のロゴやアイキャッチ画像制作をはじめてやってみました。
はじめてだったので、いろいろ試行錯誤をした内容などを書いておきます。
制作ツール
無料で、 Adobe Express を使いました。
これが使いたいからと言う訳でなくて、なんとなく使いやすいなと言う具合で使いました。
他のツールは検討していなかったのですが、もっと良いのもあったかもしれません。
ロゴ
"こぶりー" という名前から、"小さい鰤（ブリ）" をテーマとしたロゴを作っていました。
下の画像の右側が最初のロゴです。
最終的には左側の画像を採用しました。
魚のロゴにあしらいを入れて、小ささを表現しようかな...というのでツールの素材を組み合わせてみました。
なんかビミョーだなと思って捨てました。
魚のサイトでもないし、これを小さな favicon にしたら魚見えないし...、みたいな。
そこでなんとな〜く、こぶりーのキャッチコピー（見つけて、読んで、シェアする）からアイコンを無造作に貼り付けていったのです。
虫眼鏡と引用符、シェアアイコンなどです。
大きくしたり、移動させたり、回転させたりを動かしていました。
すると 「あれ、虫眼鏡を顔にして引用符を目っぽく見えない？」 と思っちゃいまして、今の形になりました。
シェアアイコンは当てはまるところがなかったので捨てました。
アイキャッチ画像
こぶりーをSNSシェアする際のアイキャッチ画像を作りたいなとなりました。
なんとなく、Google Stitch にアイキャッチ画像を作らせる指示を出しまして、以下の画像が出ました。
指示のプロンプトには、ロゴ画像やキャッチコピー、スマホアプリっぽさを入れたのですが、
「なんか残念...」となり、先の経験から "ほしいコンテンツをとりあえず押し込む" ことにしました。
その後に いらないものを削ったり、優先度を決めたり しようかなって。
製作中の考えなどは、以下がありました。
- SNSシャア向けだと左右中央にメインコンテンツがあると良いかも？
- メインコンテンツは、こぶりーが写っているスマホにしたい
- 「スマホの中でアプリを映すのってどうするんだ...」と思いお手手で切り貼り
- アイコンどこおこうかな？目立たなくて良いけど置きたい
- 視線Zの左上に置いて最初にみてもらう？別に重要じゃないや
- 背景に置いてみよう
- キャッチコピーは大きく置きたいな
- 視線的にスマホを上に、キャッチコピーを下にあると良いかも？
- スマホの絵は残したいから、キャッチコピーの背景色を透過ぼかしに
などなど考えた結果、以下の形に着地しました。
Adobe Express の無料枠だと使用できるフォントも限られているので、ある中で良さそうなものを選びました。
楽しい
はじめてだったのですが、自分の手で気にいるまで制作すると言うのは楽しかったです。
ああでもない、こうでもないを繰り返して、納得いく形に持っていくので、制作コンテンツに愛着が湧いてきます。
こういうのを何度も経験などするとデザインパターンというか、制作する上でのバリエーションがあるんでしょうね。
もっと知りたくなりました。
宣伝
"個人ブログを、見つけて、読んで、シェアする"アプリ、こぶりーをリリースしました。
人の味わい深いブログ記事を読むのはいろいろな発見がありますので、ぜひお試しください。
-
※ ログイン不要で投稿できます。
※ 同じブラウザから投稿を削除できます。
0
読み込み中...
関連する記事
タグ「デザイン」の記事
個人開発しているWebデザインについて、LP向けの1枚のページを用意したいです。 どういう構成にするのかを考える際、手書きが一番効率的に感じます。 iPad とペンを使って、純正メモアプリにどういう感じにするか書き込みます。 考えをそのまま
2026年05月17日
現在、個人開発でブログキュレーションアプリを開発中です。 https://silverbirder.github.io/blog/contents/20260419/ UIデザインについて、v0などのAIデザインツールを使う際に、 バイブコ