「SteLa」（架空の言語学習アプリ）のLPの制作を行いました。
アプリのコンセプトは「楽しく学べる言語学習アプリ」。どんな場所でも、どんなレベルでも、モバイル一つでゲームのように言語学習を始められるアプリを想定しました。
ターゲットは20代～30代の男女です。新たな語学スキルを習得したい人、海外の文化に興味がある人が、通勤時間などのちょっとしたスキマ時間に使うことを想定しています。
| テーマ | 言語学習アプリのLP |
| ターゲット | 20代～30代男性・女性 |
| 作業時間 | 約35時間 |
Illustratorで作成したロゴとアイコンです。
アプリ名の「SteLa」は、「Study」「Step Up」「Language」の3つの単語を組み合わせたものです。
ロゴのイラストは、「くじらが海を泳ぐように、言語を学んで広い世界を渡っていく」という意味を込めて、くじらをモチーフとしました。
サイト全体のデザインは、ターゲットを意識し、全体的にフラットなイラストで統一感を持たせました。
色はベースカラーに白、アソートカラーに青系、アクセントカラーにオレンジ系を使用し、レイアウトはシンプルにまとめつつ色でメリハリを持たせています。一部イラストに動きをつけることで、サイト全体の印象をより楽しいものにしています。
PowerPoint業務の経験を活かし、各セクションはスライドショーをイメージしてレイアウトしました。
各セクションのポイントを3~4点にまとめ、チェックマークで強調することで、読む手間をかけずに内容を把握できるようにしております。
スクロールで1画面ずつ画面が遷移する動きは、JQueryのプラグイン「scrollify.js」を使用。
ページネーション（画面右部の丸）もつけ、現在表示している画面の位置が分かるようにしました。
各ボタンには、ホバー時にだけ現れるCSSを設定しました。
きらりと光ったり、上下に動いたりするなど、ユーザーの動きに反応する動きを取り入れています。
JQuery、やはり難しさが格段に上がりますね…！HTMLやCSSと比べて、思った挙動にならず苦戦した場面がかなり多かったです。内容がわからずコピペしかできないのは悔しいので、自分でもある程度プログラミングできるようにこれから学んでいきたいです。
| 企画 | テーマ決定、コンセプト立案、ターゲット設定など |
| ロゴ・アイコンデザイン | ロゴおよびアプリアイコンのデザイン・イラスト作成（Illustrator） |
| サイトデザイン | サイト全体のデザイン（Figma使用） |
| コーディング | サイト全体のコーディング（HTML・CSS） サイト全体の動きの実装（JQuery） |
