2014年11月23日 星期日

網頁分析05 - 株式会社ココノヱ

株式会社ココノヱ
http://9ye.jp/

網站的主色調是基本的黑白搭配搶眼的桃紅色,最大的特色點是公司的吉祥物不時以動畫效果穿插出現於各個地方,讓網站變得十分活潑逗趣,字體選用帶著圓角的字型,符合整體的風格。




首頁
整體很簡單的以波浪造型的線條和色塊分為上下兩部分,上半部正中央的圓形有四張圖案撥放,分別是LOGO以及三項資訊公告,會自動撥放也可以自行點選觀看,下半部則是MENU。




MENU
主色與首頁剛好相反,有四個分頁可選WORKS、ABOUT、NEWS和CONTACT,點選中央的LOGO可回首頁。








MENU與吉祥物互動的動畫非常俏皮可愛,將滑鼠移到分頁按鈕上就會有不同的效果,首頁鈕是圖會翻到背面變全白,吉祥物會從中跳出來,WORKS是吉祥物從O裡探頭出來,ABOUT是吉祥物把U當作跳繩跳,NEWS是E變成門吉祥物開門跑出來,CONTACT是C會變成圓形,吉祥物出現後便會往下掉。





首頁往下拉可以看到各式各樣的資訊以圓形的區塊呈現,整個首頁非常的長,共有16個橫排的資訊可點閱,吉祥物則在圓形的邊緣上不停行走,這時如果將滑鼠移到圓形區塊上,那些行走的吉祥物會彈出去,接著會撞上旁邊的其他圓形區塊,產生像是彈珠檯遊戲般撞來撞去的效果。




將滑鼠移到圓形區塊上,整個圓形會變成帶著鋸齒狀的色塊,每個橫排的色塊顏色都不同,像是圖上的黃色而上排是藍色,其他還有綠色和桃紅色等等。
滑動閱覽時上方不時會有吉祥物從上方掉下來,掉下來時如果撞到圓形區塊上會產生凹陷的效果,像是吉祥物掉落在很有彈性的球上面的感覺。




ABOUT
頁面呈長條式設計,包含了一小段的介紹、公司的基本資訊、所在位置的地圖和員工資料,每部分資訊的背景都使用色塊區隔,瀏覽起來很清楚易懂只是必須用滑鼠一直往下滑來看是比較不方便的部分。
員工介紹的地方很有趣,滑鼠移到員工照片上會顯示動態圖片,每個人的都不同,像是中排最左邊的Reiko會一直替換不同的髮型,最右邊的Mao則是會一直閃動照相按下快門時的閃光效果。






最上方的重字是會動的,每個筆畫會左右上下晃動,讓整個字看起來搖搖晃晃的,吉祥物會從上面掉下撞在字上面再彈開。





WORKS
將作品按年份分類,2009之前歸為同一部分,2010到2014則是每年一個分類,點選進去可看到詳細的內容,當你在瀏覽某個年份時,一開始年份數字比較大且會在畫面最上方,往下滑後數字會縮小但不會消失依然保持在上方,所以當你不斷往下滑時,可以很清楚的知道自己在看哪一年份的作品,是個很好的設計。而這個頁面吉祥物一樣會不斷的從上面掉下來並且撞在圓形區塊上,




CONTACT
背景是全黑的,設計很簡潔讓人一目了然,就算不懂日文也可以順利填寫。




FOOTER
延續首頁的風格,主要放置公司的聯絡方式,有LOGO、地址、電話、傳真號碼以及FB、Twitter和BLOG連結按鈕。


2014年11月4日 星期二

網頁分析04 - A Structure Design LSD

A Structure Design LSD

網站整體設計採用極簡風格,黑白的配色及基本點線面的組合圖形,主要特點是運用許多動畫效果,讓簡單的幾何線條圖形看來活潑有趣。




一進入網頁首先會開始閃爍出現許多的半透明圓點,並接連出現點線的圖形。




接著圓點會消失,幾何點線圖形會從外到內聚集,主題字A STRUCTURE DESIGN LSD會從正中央出現。





主題字出現後停留在這個頁面觀看的話,背景會持續變動,像是宇宙星空的感覺。






點LAUNCH SYSTEM會直接進入ABOUT,正中央的圖形也是會不停旋轉改變,右邊有TWITTER、INSTAGRAM以及EMAIL的連結,除此之外沒有更多的資訊了。





MENU放在網頁的右上角,有INDEX、ABOUT、PROJECT和LAB四個頁面,像是一把尺設計很有趣可愛,現在所在的頁面會用紅色粗線標示。







 PROJECT,放置他們製作過的案子,每個項目前面都有一個幾何圖形,圖形會從扁的變成立體並且重複變化,游標移到項目上字會開始閃動。





點選進想看的項目,會跳出一個底是交叉的白色線條框架,訊息放置在中間,左上有CLOSE可點選離開,右上的WEBSITE可進入實際頁面觀看,訊息下方頁數的設計很特別,是用點及線的組合,第一個點代表第一頁,第二個點就代表第二頁,可自己點選想看的頁面,不點也會自動播放。





LAB,類似公告和部落格的設計,點選標題可進入看詳細的文章內容,點進去整個頁面會依序從右到左滑入畫面,先是最深色的色塊再來是次深的接著是最淺的,最後是白色訊息的部分,離開頁面時則會從左到右滑出畫面,順序和進入頁面時相反。

2014年10月28日 星期二

網頁分析03 - 日本レクシー株式会社

日本レクシー株式会社
http://www.omotenashi-1.jp/

日本レクシー株式会社的網站,是一間位於長野縣經營溫泉旅館、餐廳及相關企業的公司。





整個首頁是長條狀的樣式,大致分為三個部分,最上面的MENU、中間的NEW資訊欄、最下面的粉絲團及更新訊息,以下分別介紹說明。




最上面的MENU選單有ABOUT、CHALLANGE PROGECT、MY OMOTENASHI、COMPANY,除此之外有許多動態插圖,最上方太陽的光芒會一直旋轉閃爍,背景不時會有兩隻白色小鳥從左飛到右,左下角的雲則會上下飄動。




中間資訊欄的插圖也是動態呈現,溫泉池和河流的水會流動、房子炊煙飄盪、小人物會有各自不同的動作,資訊包含溫泉、食物等等,將游標移向想看部分,圓圈旁的虛線會旋轉,圖片會改變成文字訊息,想了解更多的話可以點選MORE繼續觀看。




最下面的部分有網站更新的訊息及粉絲團的連結。


接下來介紹ABOUT,ABOUT分為三個部分,ビジョン未來展望、事業紹介、風土制度,事業紹介下另有溫浴事業和飲食事業。





ビジョン主要描述公司的理念並搭配簡易可愛的插圖。




事業紹介下的溫浴事業。




事業紹介下的飲食事業最上方各種食物的照片是用從左到右不斷移動的動態方式展示。




第三個分類風土制度。




CHALLANGE PROGECT也分為三個部分カテゴリ一、ポイント、スタ一トした年,每個部份下還有許多分類可以觀看,可以選擇ALL一次觀看,也可以按照不同分類觀看,採用跟首頁相同的設計,只是改成規則的排列。





MY OMOTENASHI放著每位負責人的照片,游標移到照片上照片的顏色會變淡,點選進去可以看到更多訊息。





COMPANY是公司的基本資料,包含成立時間、資本額、地址、電話及事業內容,並附上GOOGLE地圖標示出公司位置,也列出相關設施和公司的資訊。

2014年10月7日 星期二

網頁分析02 - 夏井景子

此是夏井景子的個人網站,主要放置她的料理紀錄,包含料理的照片、作法及材料等等,整個網站都使用手寫的字體,加上手繪的插圖,背景顏色是淺淺的粉色調,充滿了溫馨的氛圍。





首頁呈現的是各式各樣的料理照片加上簡單的說明文字和插圖,照片放置的方式是一種比較隨興的方式,MENU列是保持不動的,卷軸下拉也會一直保持在最上方的位置,方便點閱其他的頁面,比較特殊的部分是,往下拉時照片及文字是用動態的方式顯示出來,與一般網頁的呈現方式不同。




個人資訊的部分。





WORKS頁面放的是各個料理的照片,點選圖片可開啟大圖以及文字說明,按箭頭可以瀏覽上一張或下一張圖片。




LESSON的頁面。




FOOTER很簡單可愛,手繪的圓圈將聯絡方式包起來,沒有複雜的文字資訊。

2014年9月30日 星期二

網頁分析01 - studio zero

這是一個提供攝影服務的工作室studio zero的網站。





首頁使用長條狀的設計,將所有資訊放入同一頁中,一開始看到的是設計過的主標題,簡單的字體搭配手感的線條串連所有字母,中間加上相機的圖案,簡約中帶有童趣感。下方有五張不同照片輪播,除了上方有頁面連結之外也在照片旁放上常用連結的按鈕,按鈕則是設計成相片的樣式。





點入PHOTO頁面,這裡是放置攝影作品的頁面,採用塊狀方式區隔不同相簿,每一本相簿分別有一張相片及主標題,讓人一目了然。





點入想閱覽的相簿後,頁面上會標明此項攝影服務的相關資訊。




再繼續往下拉,會看到此項攝影的更多照片,相片呈現也是採用塊狀方式,放出照片的一部分作為預覽,讓人更容易了解照片的內容。





STAFF頁面是攝影師的介紹,攝影師的照片也是使用相片框的樣式,與首頁的按鈕相呼應。





Q&A的頁面。





FOOTER的部分主要放置聯絡的按鈕,包含信箱、FACEBOOK、BLOG、地圖及Q&A,最下方則是其他的基本資訊。


整體網站風格給人相當清新舒服的感覺,版面配置簡單不混亂,使用起來很好