こんにちは！
突然ですが問題です( ^ω^ )

我々インクループメンバーの所属部署名はなんでしょう？
（私も知ったのは入社から2週間後のことでしたｗ）

①夢あるコンテンツ制作部
②希望あるコンテンツ制作部
③価値あるコンテンツ制作部
④未来あるコンテンツ制作部

正解は今日のブログの一番最後で発表します♪

さて本日のブログでは…

ページを移動せずに表示する内容を切り替える『タブメニュー』の作成と、その過程をご案内いたします♪
プロジェクトリーダーのＭ氏に作ってみようか！と言われて、『なんじゃそりゃー、私に出来るんかい( ;∀;)』と内心ザワザワしたのは秘密です。

余談ですが、最近は朝分からなかった事が帰りにはなんとかなっているという現象が快感になりつつあります。(笑)

タブメニューとは？

私と同じような初心者の方にも『タブメニュー』を簡単にご説明していきたいと思います。

今回私が作成したタブメニューがこちら↓

ボタン1・2・3・4のボタンをクリックするとそれぞれの内容がページの移動なしで切り替わります。
今回はイレギュラーでそれぞれの内容に折りたたみメニュー(さらにその中に表)も入っています。
この状態にするとボリュームのある情報をコンパクトに表示でき、ユーザーが必要としている情報をスムーズに表示させることが可能になります。

身近なところでは、『Yahoo!』のメニュー画面です。
見たい項目にクリックするとページが切り替わらずにそれぞれの内容が表示されます。

ふとした瞬間に、用いられている技術に気付けるようになったので、少し自分の成長を感じました。これから知識が増えてくると、普段使っているサービスの中でも様々な工夫がされていることに気付くのでしょうか…楽しみです( ˘ω˘ )！！

せっかくなので作成したタブメニューを実際に触ってほしいなぁと思い
サンプルページをご用意いたしました♪

↑お時間のある方はぜひ♪
実際にクリックしていただくとスムーズな動作でストレスを感じさせません！

ページ(URL)移動がないことでの利点は？

ユーザーへのストレス緩和

URLの移動が発生すると、画面が切り替わりページにちらつきが発生します。探している情報を見つけるまでに何度もチカチカされるとやはりストレスですよね…。今回ご案内した、ページ移動のないタブメニューだとこういったストレスを感じることなく情報の発見が可能になります！

実際にどうやって作ったの？

実はこのコンテンツを作るまでにはとても苦労しました。
構築の説明は私にはまだ難しい(先輩が言うには、JavaScriptでクリックしたときにCSSを書き換えてるやらなんやら…よくわかりません！)ので、作業の流れを正直に告白します！！

①情報収集

この『ページを移動せずに内容が切り替わるタブメニュー』を作るにあたって、WEB上で情報をかき集めました。検索キーワードとしては「URL・変わらない・タブメニュー・機能」などなど。何ページか読み込んで、初心者でもなんとか理解できるギリギリの作業だなーというのがこのステップでの感想です。

②ローカルで作ってみる

収集したHTML・CSSの情報を照らし合わせながら、理想に近い構成のものを探し、ローカルで調整します。
(※ローカルとは、WEB上ではなく自分のパソコン上で、という意味だそうです。)
今まではTeraPadでHTMLの編集を行っていましたが、今回から『Adobe Dreamweaver』を使用しました。HTMLとCSSを同じウィンドウで管理でき、作業スピードが上がったように感じます。

③管理サイトでサンプルを実装してみる

今回作業依頼をいただいたお客様のホームページは『サイト職人』という管理システムで作成されていました。メジャーなWordPresとは仕様が異なり、サンプルページの実装にも苦労しましたが、先輩方のアドバイスでなんとか仕上がりました(汗)

④正式にサイトに反映する

中身の情報を書き加え、正式ページに反映させて作業完了となります♪

お客様からのご感想

競合大手のサイトよりも完成度の高いコンテンツとして高評価をいただきました♪作業には四苦八苦しましたが、お客様からお褒めの言葉を頂くととても励みになります！

作業にあたっての感想

今回の『ページを移動せずに内容が切り替わるタブメニュー』の構造を理解したことで、大量の情報をコンパクトにまとめて掲載する方法を覚えました。
これからも、根拠のある改善をご提案をできるように勉強を続けていきます！
いずれは構造の説明もできるようになりたいです(´ω`)！

そして…

本日のブログに登場した問題の正解は③の、
『価値あるコンテンツ制作部』です。

仕事の内容は決して自己満足で終わらせず、ご依頼を頂いている企業様とサービスを利用するユーザー様に価値あるコンテンツをお届けするのが私たちの使命です。この仕事を通じて自分の価値も上げていきたいと思います(野心)。

今回この二つのサイトを参考にしました。
参考サイト1
参考サイト2

こんな初心者の私でも出来たので、ぜひみなさんもチャレンジしてみてください♪