うぇぶごと

webデザイナーの深夜のひとりごと

どうも!!苦手克服デザイナーです。

f:id:s2lybb:20181124160525p:plain

 

わたしのこと

最近いろんなサービスにフォロー機能がありますが、フォロー機能があるサービスに出会うとすぐに登録してしまいます。

でもなかなか全て更新するのとかは難しくて、気付いた時には放置気味になってしまうのが最近の悩みです。

2018年中に必要なサービスと放置気味のサービスの整理をできればなぁと思ってます。

と言うことで、行きましょう!!うぇぶごと♪

今回は私のことについて紹介します!

ほんと、興味を持ってくださったら嬉しいです。少しばかりお付き合いをお願いいたします。

 

苦手克服のためにデザイナーに?!

もともと絵を描くことは好きだけど苦手でした!高校の芸術選択も、音楽を選択していたくらいです。 ですが、ある日突然ふと思ったのです。

「苦手と思えるほど絵を描いたっけ?」

 

「苦手」という感情は私が勝手に作り出したものであり、本当はもっと頑張れば好きになれるかもしれません。

なにより自分で自分の限界を決めてしまうことが嫌でした。

まだまだ先の長い人生で、ここで自分の可能性を狭めたく無かったのです。

そして私はあえて「美術初心者歓迎」というコピーに惹かれ、新設の“デザイン学部”へ入学し、自分の「苦手」と向き合うことを決意しました。

しかし、入学して1週間も経たない内に、私は現実を知りました・・・

 

芸大志望と現役の漫画家に囲まれた学生生活

「美術初心者歓迎」というコピーに惹かれて入学した大学は芸大志望や現役の漫画家など、真剣に絵に向き合ってる方ばかりでした。

「私はもしかしたら学内で1番絵が下手かもしれない・・・」

 

「4年間劣等生として学生生活を過ごすことになるのだろうか・・・」

入学当初は負の感情で学校に行くのが嫌でした。。

 

そうだ!webデザイナーになろう!!

現実を受け止めた私は、負けず嫌いな性格から「絵以外の”これだけは私が学内で1番”という自分の武器を作ろう」と励みました。そこででた答えがwebデザイナーです。

14歳の頃からwebサイトを見ること、作ることがとても好きだったし、なにより、たくさんの人が勝手な先入観から「webデザイン=難しい」という考えを持っていて、自ら手を出さない傾向がありました。

 

Webデザインが大好きな私は「“絵”という土俵では勝てないけど、“web”という土俵なら勝てるかも!」と思ったのです。

それから独学でwebデザインを学びました。

SNSでたくさんのデザイナーさんをフォローしたり、企業が運営するデザインブログをたくさん読んだり、技術書を買って実際に手を動かしてみたり、イベントなどに参加して直接デザイナーさんの声を聞いたりと、積極的に学んでいくことで、知識を深めていきました。

たくさんの情報に囲まれる中で、「webの力で多くの方がワクワクするような社会を作りたい」と考えるようになり、webデザイナーになりたいと思いました

デザイン学習〜webデザインのレイアウト編〜

レイアウトについてのまとめ

わたしのこと

最近、作業中はラジオを聞いてるのですがオールナイトニッポンは最高です!!

わたしは聞いてる音楽の世界観にすごく染まりやすいんですね!例えば、西野カナさんとか聞いてるとすっごくガーリーなデザインになってしまうんです。

この性質を生かして、あえてガーリーなバナーを作るときは西野カナさんを聞いたり、AKB48さんを聞いたりしてます。が、普段はやっぱり芸人さんのラジオとか、時には芸人さんの漫才(銀シャリとかかまいたちとか)や落語やすべらない話とか聞いてます。

と言うことで、行きましょう!!うぇぶごと♪

ある日突然、社会人及びデザイナー3年目にして「あれ?デザイナーとしての知識ってちゃんと持ってるかな?」と、謎の不安に襲われました。

「例えば何か質問されたときにちゃんと胸張って答えられるかな?」・・・

「そもそも説明できるくらいちゃんと理解してるかな?」・・・

「デザインの常識」は常に変わっていきます。だからこそ知識のアップデートが必要だと思います。そこで、デザインについて再度学習し直すことにしました!!デザインについての学んだことや得た知識、また復習をすることで気づいたことなどをまとめていきます。

 

初回となる今回はwebデザインのレイアウトについてまとめていきたいと思います。スマートフォンやパソコン、タブレットなど、デバイスが増え、webサイトを閲覧する手段が多くなり、webデザインに関するレイアウトは多くなっています。

そこで今回は「これだけは覚えておこう」という定番のレイアウトを6つ紹介します。

1:シングルレイアウト(1カラムレイアウト)

 

f:id:s2lybb:20181115191015j:plain

 

必要な要素を縦に積んでいくレイアウトです。

スマートフォンの普及により「モバイルファースト」という考え方が浸透したこともあり、まさにこのシングルレイアウトを取り入れたwebサイトが、レスポンシブレイアウトとの相性が良い点から増加中です。

 

メリット

  • ・画面いっぱいにメインコンテンツを置けて、尚且つ視線の誘導が少ない為、訴求したい内容をしっかりと見せることが出来る
  • スマホ画面とPC画面にデザインの差が無く、修正しやすい

 

デメリット

  • ・他に誘導がない為、直帰率が上がる可能性がある
  • ・ユーザーがメインコンテンツ以外に辿り着きにくい

 

向いてるサイト:プロモーションサイト

 

参考サイト

Ginco

https://ginco.io/

理系的発想からはじまる文学賞 日経星新一賞

http://hoshiaward.nikkei.co.jp/

半常駐コネクト

https://www.tam-tam.co.jp/connect/

2:マルチカラムレイアウト

 

f:id:s2lybb:20181115191039j:plain

 

ページ内を2~3に分割し、メインコンテンツ、メニューエリア、バナーエリアなどを表示させる方法です。いまでも根強い人気があり、特に2カラムレイアウトが特に使われています。

今では画面を2分割し、左右でデザインの対比を生み出す「スプリットレイアウト」という方法もあり、多くのサイトがこれを活用しています。

 

メリット

  • ・メインコンテンツ以外にも情報を掲載することができ、1ページ内の情報量が多くなる
  • ・他のページへの回遊率が上がる

 

デメリット

  • ・世界観の統一が1カラムレイアウトと比べて難しい
  • スマホ画面での表示でデザインの調整が必要

 

向いてるサイト:ニュースサイト/コンテンツの多いECサイト

 

参考サイト

3:カード型レイアウト

 

f:id:s2lybb:20181115191059j:plain

 

カードを並べたようなデザインが特徴的なレイアウト方法です。カードのサイズは定型型でも可変型でも構いません。画像をメインで見せるサイトとの相性がとても良く、デバイスの大きさ関係なく使用できるためとても万能です。

 

メリット

  • ・レスポンシブと相性がいい
  • ・多くの情報を掲載できるため

 

デメリット

  • ・実装や管理が大変
  • ・構成が統一化されてしまうため、コンテンツ毎に差を付けることが難しい
  • ・情報に優先度がつけにくい

 

向いてるサイト:ブログ/ECサイト

 

参考サイト

4:シングルアプリケーション型レイアウト

 

f:id:s2lybb:20181115191120j:plain

 

画面遷移をさせないでユーザーが求める情報を動的に表示させることが出来ます。実装する際にはデータの読み込みについて十分な知識が必要です

 

メリット

  • ・スムーズで快適な操作を実現出来、ユーザーエクスペリエンスの向上に大きく影響
  • ・オフラインで動作する機能や通知の受け取りなど、ネイティブアプリのような実装が可能になる。

 

デメリット

  • ・処理中のデザインを考えなくてはいけない
  • ・ブラウザに任せていた「処理の部分」を実装するため、コストがかかる

 

向いてるサイト:チャット系サービス /検索機能

 

参考サイト

5:フルスクリーン型レイアウト

 

f:id:s2lybb:20181115191135j:plain

 

画面全体に写真や動画を配置するレイアウトです。ダイナミックかつオリジナル性を演出できるため、ユーザーに与えるインパクトがとても大きいことが特徴です

 

メリット

  • ・レスポンシブとして機能しやすい
  • ・世界観の演出にすごく適している

 

デメリット

  • ・横幅いっぱいに画像または動画を配置するため、ユーザーが何かしらのアクションを起こさない限り、他のコンテンツに辿り着かない

 

向いてるサイトブランディングサイト

 

参考サイト

6:グリッドレイアウト

 

f:id:s2lybb:20181115191159j:plain

 

画面全体を縦と横で分けた方眼のブロックを組み合わせて、要素を配置していくレイアウトの方法です。

 

メリット

  • ・要素の順序化、整列化がしっかりとされ、バランスのいいデザインになる
  • ・レスポンシブデザインにも取り入れやすい

 

デメリット

  • ・一度に入ってくる情報の量が多い
  • ・コンテンツ毎の重要度が全て統一されてしまう

 

向いてるサイト:作品紹介ページ

 

参考サイト

 

今回は6つのレイアウトを紹介しましたが、検索すればするほど、他にも様々なレイアウトが増えてきています。作成するサイトのコンセプトや訴求ポイントなどを踏まえて、どのレイアウトにするかを考えることが大切です。

 

また、他のサイトを見るときにも「これはどのレイアウト方法を利用しているか」を考えながら見て見ると良いと思います。