ミルクって、サプリかも

    ↑  這是日本的酪農乳業協會的網站。以一個牛奶盒做為網頁的印象主軸，背景採用鮮黃色使得網頁鮮明有活力，黑色的線條更突顯了牛奶和本身的主體，網頁主要以牛奶盒為主的小動畫貫穿整個網頁，在瀏覽時可以感受到牛奶盒部分擬人擬物的有趣手法。

    ↑  網頁的下方有一個彩色的方格所組成的選項，店選進去後可以看見很多小方格，每格方格寫下了代表的文字，滑鼠經過時就會翻轉出可愛的小圖動畫，點選進去後可以看到背景顏色會做改變，牛奶盒會有一個小動畫展示出來，最後還會在牛奶盒上傳達他的文字訊息，動畫短而有趣，頁面除了可以回去繼續點選剩下的方格之外，還可以從右側的一欄小色塊中點選想看的內容。

   ↑  回到原來的主要畫面，因為是酪農乳業協會的網站，所以介紹了方向都是推廣喝牛奶的好處，和牛奶的營養價值，介紹的頁面的左右兩側有箭頭可以點選進入下一頁，其中牛奶成分的部分還可以上下移動觀看。

   ↑介紹牛奶成分的分頁很可愛，會從牛奶盒中的陰影中表現，因為牛奶盒上的陰影剛好是用一個一個的小黑圓點來表示，畫面就直接拉到小黑圓點，用那些小圓點來表示牛奶之中的營養元素，小圓點還會隨在滑鼠在畫面的左右方向來決定往左移動或是往右移動，當點選元素後，會先說明缺乏此元素時會有怎樣的後果，還會用滑鼠的箭頭來表現，像是骨質疏鬆時，滑鼠鍵頭就變成疏鬆的骨頭了，勞累時就讓滑鼠箭頭有很多個影子，就好我們眼花時一樣，讓閱讀這些知識時變成更有趣，不會因為無聊或是枯燥而懶得閱讀，很用心的表現網頁內容。

    ↑廣告影片有四種，可以從牛奶盒中挑選想看的廣告，表現方式跟一般放置影片的網頁並無不同，但是在風格上有與網頁統一，而且廣告內容也都是可愛的小動畫，其中的素材也有在網頁中出現。

        整個網頁的風格偏向有活力的可愛風格，內容介紹以全家人的角色需求來宣傳牛奶的好處，畫面簡潔又不會感到單調無趣。雖然網頁的格式沒有特別的變化，是很單純且常用的格式，不過網頁和網頁間的串連有整體感，整體網頁給人一連串有計畫的表現手法，風格也很有漫畫插圖的感覺，並沒有強調公司本身專業性的形象，反而給人一種親切的感覺，看完之後讓人很想喝一杯好喝營養的ミルク ~ 

Website:  http://www.j-milk.jp/supplement/

ピンクのブタのパリガイド

PinkのPigのパリガイド  這是 L'OREAL化妝品公司推出的 Special 活動網站。

    ↑ 主要是推銷L'OREAL化妝品公司中的一個系列產品，用粉紅色小豬帶領大家進入像是旅遊般的情境。首先畫面是一幅地圖，許多粉紅色的標示圖針一個個落在地圖上，畫面下方的粉紅色小豬會在他的正上方上跑出對話框為你說明網頁的用途。

    ↑畫面中滑鼠的移動會讓粉紅色小豬的頭跟著你轉動，好像小豬再看著你一樣很可愛，畫面因為是地圖的樣式 ，左上角可以做大小的調整，做的像蝴蝶結一樣的 + 和 - 很符合網頁的整個風格，但是如果滑鼠的滾輪可以搭配做大小的改變就更方便了，就沒有一定要用左上角的按鈕的限制，使用上更方便快速。右上角的音樂按鈕可以使背景音樂停止，其中用選轉的小圓圈來表示音樂的進行，而停止音樂時小圓圈也會跟著停止，既直接又明顯的表現，另外音樂的停止會逐漸小聲而消失喔！ 

        以整個網頁來看，會跟著使用者本身視窗的大小，旁邊的窗簾和其他配置圖會改變位置調整成適合的百分比，唯一不變的是地圖本身，地圖只能用左上角按鈕改變大小。

    ↑ 其中網頁主要的相關連結用道路指標的標示來做連結，一個是連接部落格的標示，另一個是本身日本的應募活動，不過活動本身已經結束了。 

    ↑ 瀏覽地圖的部分方常有趣，當滑鼠經過標示時除了有小方框用文字說明，還會有可愛的小豬跳出來，其中最有趣的設計是，當經過的標點超過一定數量時，原本跳出來的小豬會在空中翻轉一圈，給人一個小驚喜。

   ↑ 當你點選地圖上的標示時，就會跳出像上面一樣的小視窗為你介紹那個地點，很可愛的地方是粉紅小豬會從下面的地方消失，出現在介紹視窗中，就好像他跑來跟你介紹一樣很有趣，而且每點選一個地點小豬都會做不一樣的動作，這樣每一個小動畫都有配合地點用心的設計，瀏覽網頁時會使人心情愉快。

　這個網頁雖然不是公司本身的主要網頁，是針對一項產品活動而設計的網站，內容卻十分有趣，整體的風格和音樂都和產品本身十分符合，粉紅色小豬遊走在時尚的街頭之中，更是使產品更增添質感。注意看小豬的話，小豬身上可是有可愛的珍珠項鍊，這說明了小豬不只是可愛有趣，也有一份高雅的氣質，影射使用產品的女性可以是高雅時尚的女性也不失可愛的天真氣息，而且有趣的網頁設計，一片粉紅色浪漫氛圍，相信很容易獲得女性的青睞。

Website: http://www.nutrigloss.jp/paris_guide/

POCARI SWEAT

 
    ↑  【ポカリスエット公式サイト】
        這是寶礦力水得飲料的日本官網。

   ↑ 首頁的主要畫面構成是上方一列選單欄位，清楚的標示出文字方便瀏覽，中間的部分是由各個方塊圖片所組成，每一個方塊圖片代表的就是上方欄位的選項，除了點選上方欄位外，滑鼠移動到圖片時，圖片會轉換成另一張圖片並在所在圖片的左下方跑出藍色方框標示出內容選項，產生了一些趣味性。 另外整個畫面會根據你滑鼠的位置上下移動，省去了拉捲軸的動作，直接的會自動移動畫面，可以輕鬆的觀看整個首頁。

   ↑  其中NEWS的部分跟其他不一樣，當滑鼠經過上方欄列的NEWS選項時，畫面會刷淡變成底圖，根據時間更新程度列出一條條的新聞項目，畫面簡單清楚，點進去就可以閱覽新聞的詳細內容，這時是開一個新的視窗。當點選首頁的選項後進入新的畫面時，是開一個新的視窗給使用者瀏覽，而從新的視窗中可以接著瀏覽其他的項目。

   ↑ 在新視窗中，當看完新聞時有選項直接接到STORY的部分，或者是可以從下方欄列選擇其他想要觀賞的項目。STORY的呈現方式用成像故事書一樣，裡面還有精美的插畫，讓人像是閱讀繪本一樣增添了一份童趣，而且當滑鼠經過書的邊角時，還會有書頁被掀起的變化，讓人覺得很有趣也像是在閱讀故事書一樣。

   ↑ 在 LINE-UP 中，每個類型的寶礦力都巧妙的安排在畫面中，當滑鼠經過飲料瓶時，會出現藍色框框的標示來說明，畫面一樣會跟隨滑鼠的移動而移動，所以可以很輕鬆的瀏覽。

   ↑ 年代表的部分，就分成上下兩部分，上面一樣沿用跟隨滑鼠移動的機制，所以畫面會跟著滑鼠左右移動。下面的部分則是呈現詳細資料。

   ↑  再來的 Q&A 和世界各地的標示，是用於一般清楚的標示，顏色依舊保持寶礦力的藍色色彩，畫面乾淨清楚。

   ↑ TVCM 的部分用一個小畫面來呈現，左邊邊條有其他的 CM 可以選擇觀賞，畫面會直接轉換成想看的廣告，十分方便，當然要觀賞更多 CM 還可以點選影片畫面的右邊文字，可以看到更多其他懬告的呈現，並且是用縮圖排列呈現。

  ↑科學的部分真的很有趣，寶礦力另外還做了科學的介紹，一開始的科學頁面，左側藍色的畫面是持續性的動畫，右邊則是像單元的條列選項，當點選了其中的一項單元，就會進入新的畫面，畫面內容就像一本書一樣，可是有別於介紹故事的網頁，它切換頁面時是直接快速的移動進入畫面，而且內容像極了理化課本的內容，除了營造出一種知識性的感覺，讓人進入一種科學專門領域的世界。

   ↑ 竟然是運動影料，當然會請運動選手來代言他們的產品，他們請來的日本的知名足球選手中村俊輔來代言，還拍了影片可以從網路上觀賞，最後還設計了了一個像是筆記本的複習內容，除了可以直接和左右的小箭頭<>來閱覽，也可以直接點選下方的筆記內容，滑鼠經過時那頁筆記時，筆記還會往上升高一點呢！移動的方式自然又有趣，又可以讓使用者複習所得到補充水分的知識，真的像是筆記本一樣。

   ↑ 最後寶礦力公司還製作了與環保概念相關的介紹，中間的圓球也是一個持續性的動畫，跟科學的部分相呼應，一樣有專業的效果呈現，整個畫面設計上除了正面的介紹環保議題，以讓公司形象增添了好的印象。


整個網頁的設計分長精緻，畫面保有寶礦力本身的特色，一直都是藍色的色調，與寶礦力的形象吻合，另外在畫面切換的同時，會有像是波紋的線條刷過，跟寶礦力上的包裝波浪一樣，這樣的設計讓人感受到公司的用心，另外其他製作的頁面內容毫不馬虎，讓網站除了是寶礦力的介紹網站外，也提供了豐富的知識性使網站變得更有價值，而且裡面的設計也很細膩，會根據主題有所細微的調整，包括和運動選手還有環保議題結合，都使公司和產品本身有形象上的提升，在瀏覽過後會更喜歡寶礦力這項產品了。



Website: http://www.pocarisweat.jp/