By kirayan4852 2021年7月10日 In News, 操作方法

ゲーム感覚のポートフォリオサイト作り

 

「One Coin」というタイトルだけが天から降ってきたので、私的デジタル作品をポートフォリオサイトで公開しつつ寄付により制作活動の支援をいただいてその価値を探ってみることにしました。

 

はじめに

「道惹メソッド」というオール無料で集客・制作・販売するネット上での仕組み作りを提案し、コーポレートサイト作りをStrikingly無料版で始めて有料のPro版に移行しWordPressサイトを本格的に立ち上げるまでの方法について以下の記事で紹介しています。

 

コーポレートサイト開設?ホップ・ステップ・ジャンプ方式とは >>> Carbon Freelance ブログへ

 

しかし、今では私自身はそもそもビジネス目的の活動には向いていないと感じるようになりました。

 

そこで、今までに趣味で制作してきた3DCGなどの私的デジタル作品をポートフォリオサイトで公開しつつ、寄付により制作活動のご支援をいただくことで、作品やノウハウなどの価値をはかってみたいと考えました。

 

One Coin Home サイト

目的によってサイトを分けることにして、入り口になるサイトを以下のようにStrikinglyで制作しました。

 

https://www.one-coin-home.com/

 

Strikinglyは汎用的なサイトを簡単に実現できるというメリットがある反面、操作レスポンスが悪いのでサイズの大きな画像を多く扱うポートフォリオサイトには向かないと判断しました。

 

One Coin Portfolio サイト

操作レスポンスの良いサイトに向いているウェブサイトビルダーやWordPressテーマなどを探した結果、Xserverのレンタルサーバー上で運営しているWordPressネットショップ「Chrome 3D」で使っているVektor社KATAWARA」と、ポートフォリオ用に「Royal Slider」プラグインを使って試作してみました。

左上のコインのロゴは、フリーの3DCGアプリ「Blender」で作って、回転するアニメーションを付けてMP4で出力して動画ファイルにし、それをアニメーションGIFファイルに変換して使っています。

ページスピードに悪影響を及ぼすのでアニメーションGIFは使いたくないですが、今回は新しい要素を取り入れたいので、とりあえずページスピードは無視してやることにしました。

 

One Coin Gallery テストサイト

試行錯誤をしているうちに、極力テキストを減らしてゲーム感覚で楽しめるサイトデザインを試してみたくなり、以下のテストサイトを立ち上げて実験的に新しい感覚のサイト作りにチャレンジしてみました。

 

One Coin Gallery サイトへ >>>

 

WordPressテーマは海外製の「Arlo」を採用し、各ページのデザインはほとんどElementorで行いました。

Arloには多くのサンプルデモファイル(XML)が付属しているので、プレビューページを参考にして#1の「Travel Blog」を導入しました。

ちなみに、ダウンロードしたZIPファイルはいったん展開すると、その中にテーマのZIPファイルが子テーマとともに含まれています。

 

ポートフォリオサイトの構成

ホームページ

ホームページ(トップページ)は、デスクトップとモバイルでデザインを変えています。

 

デスクトップは左サイドメニュー(隠せる)付きのスライダー形式で、タイトルをクリックすると各プロジェクトにジャンプできます。

モバイルはプロジェクトページと共通のデザインにして、タイトルの右横のエリアをタップするとプレビューが変わり、タイトルをタップすると各プロジェクトページにジャンプするようにしました。

プロジェクトページ

タイトルをタップするとライトボックス表示になり、ピンチアウト/インでズームをしたりスワイプでスクロールができます。ダブルタップで拡大/元に戻すができます。

縮小表示状態で画像の外側をタップすると元のメニュー表示に戻ります。

 

デスクトップのライトボックス表示ではズームやスクロールができないので、拡大したい場所をダブルクリックします。再度ダブルクリックすると元の表示に戻ります。

 

★ ギャラリーのライトボックス表示ではズームやスクロールなどがマウス操作で比較的自由にできます。

 

ギャラリーページ

アイキャッチ画像をクリックするとライトボックス表示になります。

右上のツールバーのアイコンをクリックして各種操作が可能です。

 

画像の左右にある矢印アイコンで次の画像に移れます。ダブルクリックでズームともとに戻るトグルができます。拡大時にはマウスドラッグでスクロールができます。

ギャラリーはプロジェクトのように任意のURLにジャンプするなどの自由度が無く、画像をライトボックス表示で観ることだけになります。

 

ギャラリーの下に、プロジェクトを選択してジャンプできるエリアを設けています。

 

まとめ

ポートフォリオのテストサイトを作って海外製のWordPressテーマ「Arlo」とElementorプラグインでゲーム感覚のサイトを試作中です。

 

今後は、About(プロフィール)とContact(お問い合わせ)ページを自分のものに変えて、One Coin Portfolioサイトに移行させる予定です。

 

ではでは、きらやん

 

Leave a reply