PlayGround Article デザイン レイアウトまとめ kyunkyun 2018年11月14日 Created with Sketch. 1 Created with Sketch. 152 onoyu 情報におけるデザイン ユーザーにとって見やすい・使いやすいレイアウト・デザインが必要とされてきている。多様化するウェブ・レイアウトについて、まとめて見た。 * **シングルカラムレイアウト**  シングルカラムレイアウトについては他で記事にしたのでそれを見てほしい。 [シングルカラムレイアウトって?](https://playground-i.com/articles/758dd842-3c20-4f4c-af7f-48b676d3c511) * **パララックスサイト**  parallaxとは視差事であり、パララックスエフェクトスクロールを視点の移動に立体感を持たせる視覚効果の事である。 **メリット**①**ユーザーの目を引くことができる** ユーザーの感覚を刺激し、「次へ、次へ」と促しより多くの情報を閲覧するアクションモチベーションに繋がる。繰り返しコンテンツ見たり、サイト滞在時間が増えたり、リピート来訪に繋がる。 **メリット**②**スクロールがもたらす操作性** スクロールというシンプルな操作だけで、視覚効果を楽しめながらたくさんの情報が得られる。 [1969 GAP RECORDS TV](https://www.1969records.tv/2017/) [FIREWATCH](http://www.firewatchgame.com/) パララックスサイトがまとまっているサイトを発見したので載せておく。 [パララックス効果が秀逸なWebサイト＆作り方まとめ](https://saruwakakun.com/html-css/reference/parallax) [ダイナミックなエフェクトが魅力、パララックスWebデザインまとめ](http://photoshopvip.net/34794) * **スプリットレイアウト**  スマホの普及により、スマホ中心のwebサイト設計が主流となった。縦長のスマホ向けにデザインされたwebサイトを横幅の広いPCで表示させると、横幅が余ってしまう。無理やり横に広げると、画像の表示比率の違いで見え方が違ってきてしまう。この問題を解決するレイアウトがスプリットレイアウトである。横長の画面を左右に分割することで、縦長の表示城域を作ることができる。 [stria clinic](https://stria-clinic.com/) [OTANIJUN.](http://otanijun.com/) スプリットレイアウトがまとまっているサイトを発見したので載せておく。 [見ていて楽しい！スプリットスクリーンレイアウトの特徴と参考になるまとめサイト](https://webdesign-trends.net/entry/1511) * **フルスクリーンレイアウト**  画面全体を用いた演出や特別なUIに向いているレイアウトである。 [24 hours for a resourceful future](http://www.24hours.earth/en/home) [Peter Van Alphen](http://www.petervanalphen.com/en/intro/) * **カードレイアウト**  カード型コンポートネントを並べると並べることでレイアウトの自由度が高まる。 [Pinterest](https://www.pinterest.jp/) [スプラットゥーン](https://www.nintendo.co.jp/switch/aab6a/index.html) * **ブロークングリッド**  ブロークングリッドレイアウトとは、綺麗に整えられたグリッドレイアウトをあえて崩すことによって、オリジナリティを演出するWebデザインの手法である。通常のグリッドレイアウトは、要素のサイズを揃えたり、マージンの幅も一定に揃えたりと、様々なルールを決めてデザインを行いますが、ブロークングリッドレイアウトをデザインする場合はそのルールから少し外れることによって、グリッドレイアウトに変化を生み出す。オリジナリティが出しやすい。 [ベイクドチーズタルト](https://cheesetart.com/) [TAGUCHI](http://www.taguchi.co.jp/)
