設計相關 | 宅男阿西

探索 BRIK GALLERY：日本網頁設計作品的最大規模集結平台

阿西 — Wed, 21 Jun 2023 11:27:34 +0000

2021 年時，我曾經寫過一篇「日本網頁設計作品分享，連網頁都有職人精神」來講解日本網頁設計，內容也有提到參考網站 I/O 3000、Web Design Clip 等。時隔兩年，要來跟大家介紹「BRIK GALLERY」這個蒐集各式日本網頁的平台，在他們的網頁簡介上可以看到他們是這樣介紹自己的：「国内最大規模のWebサイトリンク集」，前言就不要太多廢話，一起往下看關於他們的介紹。

目錄 Contents

關於 BRIK
註冊 BRIK 帳號
BRIK GALLERY
BRIK PORTFOLIO

關於 BRIK

進入 BRIK 官網後，你可以發現右上角有「GALLERY」、「JOB」、「PORTFOLIO」、「PRODUCTION」四種服務，這四種分別是：

GALLERY：列出 BRIK 蒐集的所有網頁，目前多達 6000 個
JOB：提供就職服務、企業媒合（Web 及設計相關）
PORTFOLIO：履歷表（作品集）產生
PRODUCTION：企業探索

除了就職服務外，我們最常用的應該會是 GALLERY 和 PORTFOLIO，不過使用 PORTFOLIO 產生個人化履歷需要先登入帳號，建議會先註冊一個，而且有帳號之後可以在 GALLERY 標記自己曾經按讚過的作品、並且記錄下來，所以有個帳號其實是非常方便的，註冊過後四種服務也都能通用。

註冊 BRIK 帳號

礙於不是每個人都會日文，所以這邊簡單跑個註冊流程給大家看。另外註冊不需要輸入日本地址及日本門號，像我就是直接打台灣的手機號碼，也是順利註冊成功。

1. 前往 BRIK，點右上方的「新規登録」

網址：https://brik.co.jp/

2. 選擇登入方式

上方的是使用第三方帳號註冊：Facebook、google，下方則是輸入個人信箱及密碼註冊。

3. 點選新規登入

要註冊請點選新規登入、下面的按鈕是給已經持有帳號者按的。

4. 填入基本資料

這邊如果看不懂，直接在網頁上點選右鍵翻譯成中文。

因為有好幾頁，如果你沒有要用履歷表服務的話隨便打就好，未來也可以在個人頁修改。

5. 信箱驗證

全部完成後開啟剛剛註冊的信箱，會收到一封「ユーザ登録完了のお願い」的確認信，點選裡面的第一個連結就驗證完成囉。

有了帳號後，我們來看看 BRIK 提供的服務吧！

BRIK GALLERY

在 BRIK GALLERY 中，目前發文的時間已有 6,000 多個作品在上面，官網表示這個數量每日都會增加。在這邊除了隨意逛逛外，也可以透過搜尋或是分類來尋找自己喜歡的作品類型。你可以透過 INDUSTRY、TYPE、COLOR、DESIGN 四種分類來尋找，這邊看不懂日文的可以直接右鍵翻譯。

在作品底下有個 Detail 按鈕，可以看到作品日期、tag、縮圖等概覽等。BRIK GALLERY 內的網頁作品都以日本網頁為主，當中的分類我最喜歡使用「日本テイスト」，也就是日式風格。

日本テイスト

這些作品融合了日本獨特的美學元素，讓人能夠感受到日本文化的魅力和獨特之處。不管是食物、旅遊、工藝等都充分展現了日本獨特的設計風格，再加上網頁上的互動和視覺的吸引，讓人邊逛網站邊嘖嘖稱奇。

你可能會好奇這些作品是哪來的，其實在上面有個「推薦」按鈕，你可以投稿自己喜歡的網站、或是自己的作品，BRIK 在審查作品內容、品質等方面是否符合要求，通過後就會放到 BRIK GALLERY 上面。

這麼多作品，我要怎麼看？

如果你覺得作品太多，就算分類了也不知道從何看起的話，在網站內有個 tips 專區，會放上官方撰寫的文章。

例如這篇「不動産・建築系のWebサイト｜優れたデザイン 23選 [BRIK GALLERY特集]」，選出了 23 個優秀的不動產相關的網頁，同時簡單講解各個網站的特色等等。除此之外還有介紹 WEB 工程師、或是 UIUX 設計師轉職的要點、找工作的眉角等等，是個含金量非常高的部落格。

BRIK PORTFOLIO

接著是可以用個人資料產出履歷表的 BRIK PORTFOLIO，可以點我看範例。

裡面的個人項目、作品列表都可以在個人頁面編輯，會直接反映到這份履歷表上，其實就跟 104 差不多，不過我個人更喜歡 BRIK PORTFOLIO 的風格，看起來簡單明瞭、下面的作品分類也可以透過切換來更改，作品連結也可以放上 Notion、Pinterest、Github 等，非常多元。

只要這邊有公開履歷，就有可能會收到來自企業的信件，所以如果你不想要公開的話，可以替自己的履歷表加上密碼，只有持有密碼才可以打開這份履歷。

如何設定密碼

首先點選網頁右上方頭像，接著點「ポートフォリオの編集」，網頁往下拉會看到「パスワード認証」的區塊。

把「パスワード認証を設定する」項目勾選，代表這份履歷需要密碼才可以瀏覽，接著在下方打入要設定的密碼後就完成囉，設定完成後可以打開無痕瀏覽器看看有沒有成功。

BRIK GALLERY 對前端工程師和設計師帶來說是個非常棒資源，這個平台不僅好用，而且作品也讓人驚豔。這些作品幾乎都是來自日本的網站，不論是簡潔俐落的排版、精心挑選的色彩搭配，還是豐富的互動體驗，每個作品都散發著獨特的魅力，讓人留下深刻的印象。對於那些渴望深入瞭解和觀察日本網頁設計的朋友們來說，BRIK 絕對是一個實用的平台。

這篇文章探索 BRIK GALLERY：日本網頁設計作品的最大規模集結平台最早出現於宅男阿西。

利用Figma製作UI元件 | Form表單篇

阿西 — Thu, 04 Nov 2021 14:11:47 +0000

這篇文章記錄了使用Figma製作UI元件、以及實際將設計稿刻到網頁上所遇到的問題。這次的設計稿其實是某Figma線上課程的作業，當中運用到了變體、Autolayout等功能。而網頁部分利用偽元素製作input、同時利用正規表達式限制輸入內容，配合Javascript的監聽。

講了這麼多，實際的設計稿長成下面這樣子：

這篇簡單紀錄一下學習心得，也把Demo與設計稿放下面：

DEMO：點我
設計稿：點我

強大的Auto Layout 與 Variants

初學Figma的我在使用Auto Layout時常感到非常困惑，原因是常搞不懂元件中的 Hug contents 、 Fix width 、 Fill container 該如何使用，特別是當元件的層級複雜化之後，該如何調整才能達到自適應的效果，這方面看來只能多熟悉工具、透過多次練習來加強。

不過如果有學過 CSS 中的flex排版的話，對於Auto Layout的概念應該會更好理解。像是轉換方向就是使用 flex-direction ，元素的對齊則是使用 align-items 及 justify-content 。

順帶一提，Auto Layout 快捷鍵是 Shift + A

另一個很棒的功能是變體 Variants ，能減少重複造輪子的時間，同時也能更好管理，就像是網頁上常見的 :hover 、 :active 、 :checked 等樣式都能利用變體功能來製作。元件設計好之後就能從Assets中拉出來，選擇自己要的property。

input的樣式修改

實作中遇到了 input 無法修改CSS的問題，選取型的input都只能用預設樣式(radio、checkbox)，不好看而且與設計稿不同，非常麻煩。這邊的解決方式使用了偽元素 ::before 以及 ::after 來處理，用 label 把 input 包起來的特性，再針對選取後 :checked 的樣式做調整。

有興趣可以參考w3schools所提供的範例。

正規表達式過濾其他格式

為了避免使用者輸入非正確的e-mail格式，這邊用了正規表達式(Regular Expression)來過濾不正確的e-mail，在//中定義出表達式即可。

const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

或者是利用 new RegExp 來建立也可以。

let re = new RegExp('^09\d{8}$')

接下來就增加判斷式，不符合格式時border變成紅色。

這次的實作心得非常簡短，因為幾乎所有元件都是看著影片跟老師製作，所以其實沒遇到太大的問題，缺點就是大家的作業都長得一樣。這次也抱持著「啊反正我都做設計稿了、不然把它刻出來吧」「啊反正我都刻出來了，不如來寫心得吧」，所以就有了這篇。後續還有很多作業要提交，也會繼續分享心得！

這篇文章利用Figma製作UI元件 | Form表單篇最早出現於宅男阿西。