LINEスタンプや絵文字を作ったあと
ほかの作品もまとめて見てもらえる場所がほしい。
そんなところからCodexと一緒に作ったのが
「みきぽっくるアルバム」です😊
キャラクターや作品の種類から探せて
気になった作品のLINEストアへ進めるカタログになりました。
今回は完成した画面と
作りながらこだわったところを紹介します。
Codexで作ったLINE作品カタログでできること
アルバムには2026年10月25日時点で198作品を掲載しています。
みきぽっくるとふんわり工房の作品をまとめています。
作品を探す入口は大きく3つあります。
- キャラクターから：好きな子を選んで関連する作品を探す
- 種類から：スタンプ・絵文字・着せかえで絞り込む
- 言葉から：検索欄に作品名などを入れて探す
作家やテイストなどの絞り込みも用意しています。
作品名を知らない人にも
気になる作品にたどり着いてもらいたいと思ったからです。
作品カードでは中身を確認できます。
購入するときは「LINEストアで見る」から販売ページへ。
カタログは作品を紹介する場所です。
購入手続きはリンク先のLINEストアで行います。
最初に伝えたのは「興味を持ってくれた人が探しやすくしたい」
大切にしたのは誰にどう使ってもらいたいか。
興味を持ってくれた人が
どんな商品があるのか探しやすい
作品カタログみたいに使用したい。
※制作時の相談内容を読みやすく整理しています。
ここからキャラクターの絵を入口にしたり
作品の種類で絞り込めるようにしたり。
見た目だけでなく探す順番も相談していきました。
同じようなものを作るなら
最初の依頼はこんな形でもよさそうです😊
自分のLINE作品をまとめて紹介するカタログを作りたいです。
作品名・画像・種類・キャラクター名・販売ページのURLを用意します。
キャラクターと種類で絞り込めるようにしてください。
気になる作品からLINEストアへ進める形にしたいです。
まず確認用の画面を作ってください。
こちらは今回の内容をもとにした依頼例です。
公開先への設置や作品情報の追加方法は
使う環境に合わせて別に確認します。
更新しやすくするために追加した3つの機能
見てもらう画面ができたら
次は「新作ができたときに自分で更新しやすいか」も気になってきました。
そこで管理する側の機能も追加しています😊
① LINEストアのURLから新しい作品を追加
商品名や画像を毎回ひとつずつ入力するのは手間。
そこでLINEストアの商品URLを貼って作品情報を取得する機能を作りました。
URLを貼る→「商品情報を取得」→取得内容を確認→作品の下書きを作る。
商品名・種類・説明・作家名・画像・見本を取得できる仕組みです。
新作を増やしていくときの入力を減らしつつ
取り込んだ内容は確認してから載せられるようにしました。
② トップに並ぶ6作品も自分で差し替え
最初の画面の6枚は
ただ飾りとして並べるだけではもったいない。
見てほしい新作や季節の作品に入れ替えられるようにしています。
管理画面で画像の変更・並び替え・タップで開く商品を設定できます。
「この画像を押したらこの作品へ」と選べる形です。
トップの画像をタップすると商品の詳細やスタンプ一覧が開き
そこからLINEストアの販売ページへ進めます。
気になった画像がそのまま作品を知る入口になります😊
③ 閲覧やクリックを確認するアクセス解析
公開したあとも
どの作品を見てもらえているのか知りたい。
そこでカタログ専用のアクセス解析もつけました。
確認できるのはカタログ閲覧・商品詳細・トップ画像のタップ・LINEストアへ進んだ回数。
商品ごとの詳細表示やストアへのクリックも確認できます。
たとえば「トップから開かれる作品」「詳細は見られるけどストアへのクリックは少ない作品」などを見て
画像の選び方や紹介の仕方を考える材料にできます。
集計しているのは閲覧やクリックの回数です。
訪問人数や購入数とは別なので
「クリックされた＝売れた」とは考えないようにしています。
作って終わりではなく
追加する・見せ方を変える・反応を確かめるところまで。
自分が続けやすい形もCodexと相談して作っていきました🤗
名前と画像の見え方は何度か直しました
「作品カタログ」から「みきぽっくるアルバム」へ
画面にあった「LINE ATELIER」という名前は好きでした。
でもその下の「作品カタログ」は
少し宣伝っぽく感じてしまって😂
もう少しかわいい名前にしたいと相談して
「みきぽっくるアルバム」に変えました。
機能が同じでも
言葉の選び方で雰囲気が変わるところは
自分で見て決めたい部分でした。
着せかえの画像が中途半端に切れていた
途中では画像のトリミングも気になりました。
特に着せかえの表紙で
右側に余計な映り込みが出ていたんです。
そこで画像を中央にきれいに収めたいと伝えて修正。
一覧で見るときと拡大したときの両方を確認しました。
「なんか違う」で終わらせずに
どの画像のどこが気になるかを伝える。
こうすると直してほしい部分が共有しやすかったです。
完成後はスマホ表示と販売リンクを確認
画面ができたら
見る人のつもりで触ってみます。
- キャラクターを選ぶと関連する作品が出てくるか
- 種類の絞り込みや検索が使えるか
- 画像や文字がスマホでも見やすいか
- 作品カードから正しいLINEストアの商品ページへ進めるか
制作中にこのPCだけで表示できていても
ほかの人が開けるとは限りません。
共有する前に公開URLでも確認することが大切です。
私のアルバムは現在
WordPressサイト内のページとして公開しています。
作品を作ったあとの「見せ方」も相談できた
カタログを作って売上が増えたという結果は
今の時点ではまだ出せません。
今回できたのは
作った作品をまとめて見てもらえる入口です。
好きなキャラクターから探す。
使いたい種類から探す。
気になったら中身を見て販売ページへ。
画像を作るだけでなく
その後の見せ方もCodexと相談できるんだなと感じた制作でした🤗
みきぽっくるアルバム
スタンプ・絵文字・着せかえをまとめて掲載しています。
気になる子がいたらぜひのぞいてみてください🌸
スタンプ制作の話はこちらにもまとめています。
Codexでポップアップスタンプを作ってみた制作記録