» そんな考え方があったのか…切り抜き写真の使い方|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

そんな考え方があったのか…切り抜き写真の使い方

スタッフブログ

  • 2020.02.27

    そんな考え方があったのか…切り抜き写真の使い方

    顔アイコン

    こんにちは!デザイナーのバンクです☺

    ブログの番が回ってくるたびにもうそんなに日にちが経ったのかとしみじみしております。早いですね。

     

    日々先輩デザイナーズからいろんなアドバイスやご指摘をいただきながら成長している(はず)な私ですが、その中でも特に印象に残ってる切り抜きについてご紹介します!

     

     

     

    —————————————————————————————————————-

     

    まずは印象に残っているカリスマデザイナー鈴木さんのお言葉がこちら…

     

    「切り抜き写真は飛び道具みたいなもん」

    (どーん)

     

     

    鈴木さんと会話をしていると何言ってるんだろうと思うことは日常茶飯事なのですが、この時も「はい?」ってなりましたね。

     

    しかし説明を聞いてみたら「なるほどそういう考え方の元切り抜き写真を使ってるのか」と非常に勉強になりました。

     

     

     

    まず私が切り抜きを使ってこんな感じにレイアウトしていたんです。

    img

     

     

     

    これを鈴木さんに確認していただいたところ、

    切り抜き写真がもったいない!!と声を大にして言われまして。

     

    以前ブログで写真の使い方3パターンをご紹介したのですが、

    その中の一つである切り抜き写真は、デザインに簡単に立体感を作ることができる超素晴らしアイテムだったんです!

     

     

    この私のデザインを参考に説明すると、

    女性の切り抜きをちょっと上に出して調整してみるだけで…img

     

     

    これだけで平面ぺちゃんこデザインに奥行きを出すことができました!非常に便利!

    こうやって切り抜きを飛び出すような使い方をしてリズムを作ったり、目線が引っかかるところを意図的に作れるようになるともっとユーザーさんが見やすいデザインができるようになりそうです!

     

     

    確かになんとなく無意識にこういった表現をしている時がありますが、わかっててやるのとじゃ全く違うので、何事にも意味をもったデザインをするべきですね。

     

     

    特にレイアウトに引っかかる部分がなくてさら~っと流し読みされてしまいそうなときにこの飛び道具作戦は有効そうです。多様注意ですが!

     

     

     

     

     

    といいつつ覚えてから私は結構多用してます。

    画像にかぶせてみたりとか

    img

     

     

     

    バナーから飛び出してみたりとか

    img

     

     

     

     

     

     

    ただここで注意点が一つ!!

    特にバナー系で飛び道具を使っていて、隣に普通のバナーが並んでいるとき

    飛び出している部分を含めてmargin paddingやらの装飾ががかっかってしまうことをお忘れなく!私はよく忘れます!コーディングのことも視野に入れてデザインしなくちゃですね。

    img

     

     

    私はコーディングのことはまだまだ疎いので詳しいことは言えませんが、「左のバナーだけ数ピクセル高さが合わないなんで!!」と悩んでたらこういう飛び道具シリーズが原因だったことがたまにありますm(__)m

     

     

    それと似たような要素だとアルファベットにも要注意!

    g・y・j・pなどの下にはみ出る系のアルファベットは、上記のバナー同様はみ出している部分も含めて装飾がかかるでちゃんと把握しておくことが大事ですね~気を付けましょう※※

     

    img

    話がそれましたが、

     

    飛び道具系切り抜き写真シリーズはうまく使いこなすと立体感が出で飽きないデザインになる!

     

    使いこなして奥行きのあるデザインができるようになりたいです◎

     

     

    それではまた次回!

    Bye Bye 🙂

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2020年4月
« 3月    
 12345
6789101112
13141516171819
20212223242526
27282930  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス