![](http://kunoryo.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-21.34.10.png 1300w, http://kunoryo.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-21.34.10-300x168.png 300w, http://kunoryo.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-21.34.10-1024x574.png 1024w, http://kunoryo.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-21.34.10-768x431.png 768w, http://kunoryo.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-21.34.10-1536x862.png 1536w, http://kunoryo.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-21.34.10-2048x1149.png 2048w)
ポートフォリオサイト
サイトURL | https://kunoryo.com/ |
---|---|
制作範囲 | デザイン、コーディング |
使用言語 | HTML,CSS,jQuery,sass |
ツール | Adobe XD,Photoshop,WordPress |
オリジナルデザインのポートフォリオサイトを制作しました。WordPressの実装、アニメーション、レスポンシブ機能を施しています。
コーポレートサイトやメディアブログを意識したデザイン
コーポレートサイト
コーポレートサイトの制作を想定してデザインしました。信頼感のある青の配色や目に入りやすいフォントやサイズを意識しています。
メディアブログ
構成はメディアブログのサイト制作を想定してデザインしました。2カラムにすることでオーナーがどんな人物かわかりやすいデザインになっています。
「伝わる」デザイン
バナーの活用によってどんな事ができるのか瞬時に伝わるよう工夫しました。
またアコーディオン、スライダーの活用で必要な情報がコンパクトで伝わりやすいデザインになっています。
記事の更新機能、カテゴリー別の管理
記事の更新
WordPressの実装によって記事の更新(このサイトの場合は実績を記事にしています。)ができるようになっています。クライアント様にとっても更新しやすい設計になっておりますので、記事制作の際はサポートさせていただきます。
![](http://kunoryo.com/wp-content/uploads/2022/10/single-1024x573.jpg)
カテゴリー別の管理
投稿ジャンルを分類できるようにしました。ユーザーが見たい情報に辿り着きやすいようになっています。
![](http://kunoryo.com/wp-content/uploads/2022/10/category-1024x566.jpg)
SEO対策
外からは分かりませんが、SEO対策も充実しています。また画像やコードの軽量化も行うことで、ユーザーが使いやすいように工夫されています。
スライダー、ハンバーガーメニューなどの頻用アニメーション
スライダー
スライダーを活用することで、ページが長くなって見にくくなることを防いでいます。
![](http://kunoryo.com/wp-content/uploads/2022/10/slider-1024x345.jpg)
ハンバーガーメニュー
このサイトはスマホやタブレットでも見やすいようにデザインされています。その際欠かせないメニューバーをまとめるためのハンバーガーメニューを実装しています。
![](http://kunoryo.com/wp-content/uploads/2022/10/hamburger-1024x558.jpeg)
アコーディオン
Q&Aにはアコーディオンを実装しました。質問の内容と回答が視覚的に分かりやすく、間延びすることを防いでいます。
![](http://kunoryo.com/wp-content/uploads/2022/10/accordion-1024x580.jpg)
オリジナルのバナー制作
スライダー内の画像も自作しております。必要な場合はバナー広告も制作可能です。ヒヤリングで得た情報を活かし、ユーザーの要求に届くような言葉を選定し、効果的にデザインします。自己満足のデザインではなく、実際のバナー広告を研究し理論に基づいたデザインを設計します。
![](http://kunoryo.com/wp-content/uploads/2022/10/wordpress-1024x336.jpg)