Mina

UXUI デザイナー・フロントエンドデベロッパー

coolgirl.online

  • coolgirl.online⬈

    2022

  • ケーススタディ

    「coolgirlonline」というクリエイティブおよびソーシャルメディアの専門家のための一時的なランディングページのデザインと開発を行いました。

    プロジェクトの期間

    3ヶ月

    主要スキル

    プロダクトデザイン、アイディエーション、スケッチ、情報アーキテクチャ、ユーザーインターフェースデザイン、インタラクションデザイン、プロトタイピング、ウェブサイト開発

  • 「昔ながらのクールな雰囲気が欲しいです。まるで1999年のGeoCitiesのような感じで。」

  • 問題

    クリエイティブでソーシャルメディアの専門家であるcoolgirlonlineは、ウェブプレゼンスを持っていませんでした。Instagramだけに頼っていたcoolgirlonlineは、より堅実なウェブプレゼンスに進む準備ができていました。

  • プロジェクトのビジョン

    Instagramのアルゴリズムの制約に直面していたcoolgirlonlineは、新しい形のプレゼンスに進む準備ができていました。最終的なプロダクトは、昔ながらのクールな雰囲気を持ち、まもなく公開のメッセージが表示され、カスタムのコメントセクションフッターが必要でした。

  • プロジェクトブリーフ

    coolgirlonlineのランディングページを作成するという課題に取り組みました。まず最初に、アーカイブされたGeoCitiesサイトの調査を行い、使いやすさとアクセシビリティのベストプラクティスを理解し、昔ながらの雰囲気を保ちながらしっかりとした基盤を築きました。Figmaでデザインとプロトタイプを作成し、クライアントと効果的にコミュニケーションを図りました。そして、カスタムのPHP、JS、CSS、およびHTMLを使用してWordPress上にサイトを構築しました。

  • 「昔のGeoCitiesサイトのようなコメントセクションを作成したいです。それは可能ですか？」

  • 調査

    競合分析

    いくつかの成功したミームソーシャルメディアアカウントのウェッブプレゼンスに対して競合分析を実施しました。

  • ターゲットオーディエンスの分析

    Reddit、Craigslist、Facebookでターゲットオーディエンス分析を行いました。クリエイティブな人々が自身のウェブサイトを紹介する投稿を分析し、効果的で印象的なUXUIの実装について調査しました。

  • 結果

    全体的に、これらの分析を傾向に合わせて統合し、包括的なユーザーの課題を明確にしました。

  • 私は、優れたソーシャルメディアプレゼンスとウェブサイトを持つクリエイティブな人物を探しています。そのために、以下の方法を検討しています。

    ・

    まず最初に、Googleで検索します。

    ・

    第二に、ソーシャルメディアプラットフォームとそれらのハッシュタグを使用して、自分の興味を引くクリエイターを見つけます。

    ・

    第三に、プロフェッショナルなウェブプレゼンスを持つクリエイターを探します。

  • 私は、常に良質な作品を制作するクリエイティブな人物を必要としています。そのため、彼らのウェブサイトで以下の要素を探します。

    ・

    まず第一に、プロフィール画像を確認します。

    ・

    次に、ウェルカムメッセージを確認します。

    ・

    第三に、独自のウェブプレゼンスを確認します。

    ・

    最後に、ウェブサイトに組み込まれた対話性を確認します。

  • ユーザーの課題

    「優れたソーシャルメディアクリエイティブを探しています。オンラインで見つけるための手助けが必要です。」

    解決策

    強調して言えることは、coolgirlonlineが次のプロジェクトのためのクリエイティブな存在であり、将来のコラボレーションの可能性もある新たな才能です。

  • これにより実装する機能

    ・ 確かに、魅力的なランディングページ
    ・ 具体的には、ランディングページでの特集作品の表示
    ・ 「まもなく公開」という要素を含んだメッセージ
    ・ 完全に機能するコメントセクション

  • ユーザーテスト

    目標

    オンラインアーカイブからのGIFを使用して、直接WordPress上でユーザーエクスペリエンステストのためのプロトタイプを作成しました。これにより、ウェブサイトの使いやすさとアクセシビリティに関するデータを収集しました。

  • プロセス

    特定のデモグラフィックを対象にユーザーテストを実施しました。これには、ソーシャルメディアのインフルエンサー、マイクロインフルエンサー、およびミームアカウントが含まれます。これらのデモグラフィックに焦点を当て、プロトタイプを研究の基盤として活用することで、ランディングページのデザインを改善するための重要な要点を見つけることができました。

  • 結果

    さらに、このプロトタイプを活用することで、ウェブサイトの使いやすさとアクセシビリティに関する貴重なデータを収集できました。特に、テストはユーザーがインターフェースとどのようにやり取りし、コンテンツをどれだけ簡単にナビゲートできるか、デザイン要素が直感的で視覚的に魅力的かどうかに関する洞察を提供しました。このユーザーテストの結果は、ウェブサイトの全体的なユーザーエクスペリエンスを向上させるための将来の改善と最適化に関する情報提供となります。

  • MVP（Minimum Viable Product）/ワイヤフレーム

    ワイヤフレーム

    ワイヤフレームは、MVPを洗練させ、重要なルートを確認するために作成されました。

    プロトタイプ

    最終的に、プロトタイプをより高い忠実度のモデルに近づけるために洗練させました。

  • 「ウェブプレゼンスに昔ながらのインターネットの雰囲気を感じるランディングページは、明らかに重要です。」

  • UIデザイン

    スタイルガイド

  • 実装と開発

    アーキテクチャ

    まず第一に、coolgirlonlineのランディングページのアーキテクチャは、ユーザーセンタードのデザインアプローチに従っており、訪問者にシームレスで直感的なブラウジング体験を提供しています。ユーザーのニーズを優先し、効率的な情報検索を重視することで、coolgirlonlineのランディングページのアーキテクチャは、効果的に専門知識を紹介し、エンゲージメントを促進するためのユーザーフレンドリーなプラットフォームを作成することを目指しています。

  • スタック

    プラットフォーム：WordPress
    データベース：MySQL
    バックエンド：PHP（WordPressの管理画面をCMSとして使用）
    フロントエンド：HTML / CSS / JS
    デジタルアセット管理：WordPress メディアライブラリ

  • 統合（プラグインなど）

    ヘッダー/フッター/投稿インジェクション（Stefano Lissaによるプラグイン）
    レスポンシブ ライトボックス＆ギャラリー（dFactoryによるプラグイン）
    Gwolle Guestbook

  • アウトカム

    達成事項

    最終成果物のスクリーン録画はこちらからご覧いただけます。

  • coolgirlonline プロジェクトにおける包括的なウェブデザインとウェブ開発の取り組みを通じて、私は重要な成果を達成し、主要なマイルストーンを達成しました。全体的に、私の努力は coolgirlonline を信頼性のある、オリジナルな、そして才能豊かなクリエイティブとして位置づける一環となりました。

  • ウェブプレゼンスの刷新

    最後に、ウェブデザインに関しては、視覚的に魅力的でユーザーフレンドリーなランディングページを作成し、効果的にcoolgirlonlineの雰囲気を表現しました。その結果、シームレスなウェブ開発の実装により、さまざまなデバイスでスムーズなナビゲーションと最適なパフォーマンスが確保されました。

  • ホームページに戻る