【漫画】フリーランスが“やってはいけない”活動名
- フリーランス/個人事業主
- 漫画
- 連載
ポートフォリオサイトを作ろうとする時、独自の色を出そうと「イケてるデザイン」を追求する方も多いはず。とはいえ、パッと思いつくデザインはどこかで見たことがあるようなものばかり。
そこで、もっとビジュアルにもこだわってポートフォリオサイトを作りたいという方けに、今回は「アコーディオンスライダー」をご紹介します。
サイトのビジュアルで勝負したいという方は、ぜひ活用してみてください。
カテゴリごとに切り分ける！ポートフォリオサイトに最適な「 アコーディオンスライダー 」
「アコーディオンスライダー」とはその名の通り、クリックとともにメニューバーが展開される「アコーディオン」と、写真やキャッチコピーなどが横にスライドして流れる「スライダー」の要素を掛け合わせたスライダーのことです。
従来のスライダーでいえば、一枚一枚の写真が横にスライドする「カルーセルスライダー（単にスライダーとも）」を真っ先に思い浮かべるかもしれませんが、アコーディオンスライダーはカルーセルスライダーとは異なり、複数の画像が段組みになって画像ごとにスライドする仕組みをもちます。これにより、一枚の写真だけでは表現しきれない情報をスタイリッシュに伝えられます。
またスライダーの写真ごとに<a>タグを設定することで、グローバルナビゲーションの機能を代替してくれます。ポートフォリオサイトなど、ビジュアル面で周りと差別化したい場合にも最適です。
アコーディオンスライダーの実装方法
アコーディオンスライダーの実装は基本的に以下の2つの方法どちらかを用いて実装します。
- イチから自分でHTML5/CSS3/JQueryを使ってアコーディオンスライダーそのものを作る
- 配布されているJQueryプラグインのアコーディオンスライダーを使う
今回の場合は、プログラミング初心者でも手軽に扱えるよう、後者のJQueryプラグインを使ったやり方をご紹介します。
※ JQueryプラグインとは、HTML5/CSS3/JQueryなどを使って作られたファイルのことです。有料無料問わず、有志でファイルを作って配布されており、ファイルをダウンロードすれば誰でも利用できるものとなっています。
導入の流れは以下の通り。基本的にはどれも初級レベル以上のHTML5/CSS3/JQueryの知識が必須です。
- jQueryプラグインのファイルをダウンロード
- HTMLファイルにJQuery本体とJQueryプラグインを読み込む
以下で詳しく説明します。
1. jQueryプラグインのファイルをダウンロードする
まずはjQueryプラグインのもととなるファイルをそれぞれダウンロードしましょう。
jQueryのファイルは、GitHubや個人サイトに落ちているので、ライセンス要項を確認しつつ手順にしたがってダウンロードを進めましょう。
今回はJQuery Script.netに掲載されている「Automatic Accordion Slider Plugin For jQuery – Accordion.js」を例に解説します。
JQuery Script.netの各ページにある「Download」をクリック。すると自動でZIPファイルがダウンロードされるので、ファイルを解凍・展開します。
HTMLファイルにjQuery本体とjQueryプラグインを読み込む
ファイルを展開できたら、あとは自前で用意したHTMLファイルにjQuery本体とjQueryプラグインを読み込むだけ。
ちなみにここでのポイントは、jQuery本体の読み込みを忘れないことです。jQueryプラグインにしろ、通常のjQueryにしろ、jQueryという動作ファイルを動かす以上、そのもととなるファイルを読み込まなければ動作が機能しません。
またjQueryプラグインの場合、プラグインごとに対応しているjQueryのバージョンが異なります。そのためプラグイン利用する際は、プラグインに合ったバージョンを選ばねばなりません。プラグインを使う際は、あらかじめ記載されたデモページを注意深く読むようにしましょう。
「Automatic Accordion Slider Plugin For jQuery – Accordion.js」を利用する場合は、<head>要素の<title>タグ直下に以下のコードを入れます。
【index.html】
<!--JQuery本体を読み込むファイル-->
//code.jquery.com/jquery.min.js
<!--JQueryプラグインを読み込むファイル-->
http://js/accordion.min.js
実際のコードに導入してみるとこの通り。
【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--JQuery本体を読み込むファイル-->
//code.jquery.com/jquery.min.js
<!--JQueryプラグインを読み込むファイル-->
http://js/accordion.min.js
</head>
<body>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</body>
</html>
その他、必要に応じてCSSファイル等も合わせて読み込めば完了です。
※ファイルの場所は、それぞれ保存する位置によって変わるので、必要に応じて適宜URLを修正するようにしましょう。
初心者でも簡単！すぐに実装できるアコーディオンスライダー10選
では、どういった種類のアコーディオンスライダーがあるのでしょうか。ここではjQueryプラグインを使って簡単に実装できるアコーディオンスライダーを10個ご紹介します。
1. Responsive Accordion Slider With jQuery And CSS3
レスポンシブデザインに対応したjQueryとCSS3のアコーディオンスライダーです。横文字でページのナビをそれぞれ表示してくれるので、ポートフォリオサイトに制作実績をまとめる際に役立ちます。
Responsive Accordion Slider With jQuery And CSS3
2. Horizontal Accordion Slider Plugin with jQuery – Pana Accordion
シンプルなデザインのアコーディオンスライダーです。マウスを写真位置に合わせることで、写真の明度を変化させる仕組みになっています。
Horizontal Accordion Slider Plugin with jQuery – Pana Accordion
3. Automatic Accordion Slider Plugin For jQuery – Accordion.js
右にスライドするアコーディオンスライダーです。コードの記述量も少なく比較的容易に導入できるので、JQueryプラグインをまだ利用したことがない方にはおすすめです。
Automatic Accordion Slider Plugin For jQuery – Accordion.js
4. Responsive Accordion Gallery Plugin With jQuery
クリックに応じて文字が飛び出すアコーディオンスライダーです。スライダーで使われた写真の補足説明をしたいときに役立ちます。
Responsive Accordion Gallery Plugin With jQuery
5. Responsive Horizontal jQuery Accordion Plugin – AccordionJS
クリックで開閉するアコーディオンスライダーです。先に紹介した「Responsive Accordion Gallery Plugin With jQuery」とは異なり、文字情報を多く入れたいスライダーを作るのに最適です。
Responsive Horizontal jQuery Accordion Plugin – AccordionJS
6. Fullscreen Expanding Accordion / Slider With jQuery And CSS3
画面いっぱいのフルスクリーンで利用できるアコーディオンスライダーです。従来のアコーディオンスライダーとは異なり、画面全体がスライダーの役割を担っているため、ビジュアルで攻めたい方には大変おすすめできます。
Fullscreen Expanding Accordion / Slider With jQuery And CSS3
7. Responsive Diagonal Slider Plugin With jQuery And CSS3 – Skewed Slider
斜めに画像が配置されたアコーディオンスライダーです。画像の枚数や画像の大きさといった細かな調整は必要になるものの、一風変わったオシャレなサイト制作には向いているデザインとなっています。
Responsive Diagonal Slider Plugin With jQuery And CSS3 – Skewed Slider
8. Smooth Horizontal Accordion Slideshow with jQuery and CSS3
ナビゲーションの機能を代替してくれるアコーディオンスライダーです。画像の透過とともにスライダータイトルを表示してくれる、特殊な変化をもったスライダーとなっています。
Smooth Horizontal Accordion Slideshow with jQuery and CSS3
9. Smooth Accordion Slider with jQuery and CSS3 – Showcase Panels
画像情報の詳細をホバーで表示してくれるアコーディオンスライダーです。一見シンプルですが、裏では複雑な処理がされたスライダーとなっています。
Smooth Accordion Slider with jQuery and CSS3 – Showcase Panels
10. Simple Accordion Plugin For jQuery – zAccordion
名前の通り、シンプルな作りが売りのアコーディオンスライダーです。カスタマイズのバリエーションには富んでおり、10種類以上の動きの中からお好みでカスタマイズできます。
Simple Accordion Plugin For jQuery – zAccordion
おわりに
今回は、アコーディオンスライダーを10個ご紹介しました。実装にはjQueryプラグインを使うため、初級レベル相当のプログラミング知識は必要になりますが、少しでもプログラムに触ったことのある方ならば比較的簡単に導入できるでしょう。
また、どれも導入方法がそれぞれ異なるため、デモページをよく確認して導入するようにしましょう。
アコーディオンスライダーを使ったことがないという方は、この機会にぜひ一度使ってみてください。
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
サイト運営が趣味なWeb制作系ライターとして活動中。最近はライター業と並行してサイト運営・時報の拡張機能の開発をやっています。
