{"id":7696,"date":"2023-06-23T16:43:24","date_gmt":"2023-06-23T07:43:24","guid":{"rendered":"https:\/\/www.hideandseek.co.jp\/?p=7696"},"modified":"2025-10-27T11:10:40","modified_gmt":"2025-10-27T02:10:40","slug":"a-must-read-for-non-designers-and-design-beginners-click","status":"publish","type":"post","link":"http:\/\/www.hideandseek.co.jp\/en\/archives\/7696","title":{"rendered":"[A Must-Read for Non-Designers and Design Beginners] The Basics of Banner Design That Gets Clicks and 10 Key Points"},"content":{"rendered":"

Hello, everyone.
\nWe offer a full-service management solution that handles every aspect of your Rakuten Ichiba store,
\nI'm Kodama, a graphic and web designer at Hide & Seek, Inc.<\/p>\n

In this article, we\u2019ll share some design tips for improving click-through rates, using a sample banner ad for \u201chide & seek\u201d as an example.<\/p>\n

 <\/p>\n

What is a banner ad?<\/h2>\n

When you're browsing the internet, have you ever noticed the eye-catching images on the right or at the bottom of the page?<\/p>\n

 <\/p>\n

When you click on that image, it takes you to another site\u2014that image is a banner ad.<\/p>\n

\"hide_blog_banner\"<\/p>\n

A banner ad is a general term for Internet advertisements displayed on web pages that use images or animations.<\/p>\n

 <\/p>\n

Images with links are displayed in the specified size, and clicking on them directs users to the advertiser's website.<\/p>\n

In addition to still images, there are now many banner ads that feature motion, such as GIF animations and video ads.<\/p>\n

 <\/p>\n

While the text within images\u2014such as captions\u2014is important, people won\u2019t click on them unless the design is good.<\/p>\n

 <\/p>\n

The extent to which you can improve the design quality will affect the click-through rate of your banner ads.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Point 1: Readability<\/h3>\n

 <\/p>\n

\"hide_point_01_01\"<\/p>\n

The banner ad (above) seems somewhat out of place compared to the banner ad (below), giving the impression that it\u2019s hard to read.<\/p>\n

So, what aspects of the banner ad (above) should be edited?<\/p>\n

 <\/p>\n

\"hide_point_01_02\"<\/p>\n

As for the banner ad (above), if you take a closer look,<\/p>\n

 <\/p>\n

\u2460 The spacing between characters is too wide, making it hard to read.<\/p>\n

\u2461 The emphasis on the parts that should be highlighted is too weak<\/p>\n

\u2462 The widths aren't uniform, so it looks uneven.<\/p>\n

 <\/p>\n

There are problems like that.<\/p>\n

 <\/p>\n

\"hide_point_01_03\"<\/p>\n

So, regarding each issue,<\/p>\n

 <\/p>\n

\u2460 Reduce the overall letter spacing<\/p>\n

\u2461 Change the text below to bold<\/p>\n

\u2462 Align text to the left<\/p>\n

 <\/p>\n

If you try doing it as described above, it will look great and give a neat impression.<\/p>\n

By adjusting the balance of the text, we improve readability, allowing consumers to grasp the information instantly.<\/p>\n

 <\/p>\n

In addition, by varying the font size\u2014creating a contrast\u2014between the text and the areas you want to highlight, you can add visual interest to your design.<\/p>\n

 <\/p>\n

Point 2: Text | Impression Edition<\/h3>\n

 <\/p>\n

\"hide_point_02\"<\/p>\n

Choosing the right font is important.<\/p>\n

Whether you use Ming or Gothic typefaces, the impression conveyed by the text can change significantly depending on factors such as size and weight.<\/p>\n

Let's solidify the image of the worldview you want to convey and select the best font.<\/p>\n

 <\/p>\n

Point 3: Images | Photo Editing: Contrast<\/h3>\n

 <\/p>\n

\"hide_point_03\"<\/p>\n

By adjusting the color tones of an image, you can create the desired look and make the text easier to read.<\/p>\n

The greater the contrast between the background color and the text color, the better the text is to read, which makes it more user-friendly.<\/p>\n

It's also very important to edit the image so that it matches the tone of the message.<\/p>\n

 <\/p>\n

Point 4: Images | Selection Guide<\/h3>\n

 <\/p>\n

\"hide_point_04\"<\/p>\n

The click-through rate also varies depending on the models featured in the images.<\/p>\n

While relevance to the product is certainly important, results show that click-through rates are higher for women than for men, and that unique, eye-catching photos tend to get more clicks than safe, unremarkable ones.<\/p>\n

 <\/p>\n

Point 5: Colors | Color Combinations<\/h3>\n

 <\/p>\n

\"hide_point_05\"<\/p>\n

 <\/p>\n

The basic color scheme consists of the \u201cBase Color 70%,\u201d \u201cMain Color 25%,\u201d and \u201cAccent Color 5%.\u201d<\/p>\n

 <\/p>\n

If you maintain this ratio, you'll be able to create a cohesive design.<\/p>\n

If you use too many colors, it becomes difficult to convey the main points.<\/p>\n

 <\/p>\n

While you can sometimes incorporate a variety of colors, it\u2019s generally safer to stick to designs that follow the basics of color theory when you\u2019re just starting out.<\/p>\n

 <\/p>\n

Point 6: Shapes | Selection<\/h3>\n

 <\/p>\n

\"hide_point_06_01\"<\/p>\n

The banner ad shown above, which uses a circular shape and seems like it would boost both impact and style, actually lacks a bit of practicality.<\/p>\n

 <\/p>\n

\"Banner ads\" are widely used on social media these days.<\/p>\n

For example, while the circular format works well for banners with proportions close to a square, it doesn't fit well when resized for landscape-oriented ad spaces.<\/p>\n

 <\/p>\n

\"hide_point_06_02\"<\/p>\n

To match the horizontal rectangle, it\u2019s a good idea to change the shape\u2014for example, from a circle to a box, as shown in the banner below.
\nIn addition, by selecting shapes that are appropriate and complement the product, you can convey a more positive image.<\/p>\n

 <\/p>\n

Point 7: Organizing Information | Prioritization<\/h3>\n

 <\/p>\n

\"hide_point_07_01\"<\/p>\n

To ensure your message comes across clearly within a small space, be sure to organize the necessary information and elements effectively.<\/p>\n

By taking the design on the left, removing unnecessary embellishments, adding the treatment scenes you want to highlight, and adjusting the visual presentation to prioritize the text, you can create highly effective creative work.<\/p>\n

 <\/p>\n

\"hide_point_07_02\"<\/p>\n

Point 8: Screen Layout<\/h3>\n

 <\/p>\n

\"hide_point_08\"<\/p>\n

People tend to look at things from left to right.<\/p>\n

So, if you want to emphasize the copy, for example, it\u2019s better to place the copy\u2014rather than an image\u2014at the beginning of the viewer\u2019s line of sight; that way, the message will be more easily absorbed.<\/p>\n

 <\/p>\n

Point 9: Arrangement and Grouping<\/h3>\n

 <\/p>\n

\"hide_point_09\"<\/p>\n

 <\/p>\n

Since the elements are scattered, I'll group them together to create a focal point.<\/p>\n

In addition, placing a large, circular eye-catcher on the left can help draw the user's attention.<\/p>\n

 <\/p>\n

Point 10: Screen Layout | Margins<\/h3>\n

 <\/p>\n

\"hide_point_10\"<\/p>\n

Aligning the margins of each group\u2014top, bottom, left, and right\u2014makes the layout look neat.<\/p>\n

 <\/p>\n

Ultimately, please check it for yourself.<\/p>\n

While there are techniques that create a strong visual impact by deliberately going outside the lines, it\u2019s generally safer to follow the guidelines unless you have a specific purpose in mind.<\/p>\n

 <\/p>\n

Finally<\/h2>\n

I\u2019ve covered various design tips, but the main point I want to make is that anyone can create a good banner ad as long as they focus on the essentials.<\/p>\n

Let's arrange the elements with readability and clarity in mind.<\/p>\n

I'm sure you'll be able to create a great banner ad!<\/p>","protected":false},"excerpt":{"rendered":"

\u307f\u306a\u3055\u3093\u3053\u3093\u306b\u3061\u306f\u3002 \u697d\u5929\u5e02\u5834\u306e\u3059\u3079\u3066\u3092\u304a\u4efb\u305b\u3044\u305f\u3060\u304f\u904b\u7528\u4ee3\u884c\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3001 \u682a\u5f0f\u4f1a\u793eHide\uff06S […]<\/p>\n","protected":false},"author":28,"featured_media":7697,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[237],"tags":[239,201,218,82],"class_list":["post-7696","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-237","tag-239","tag-201","tag-218","tag-82"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"[A Must-Read for Non-Designers and Design Beginners] The Basics of Banner Design That Gets Clicks and 10 Key Points | Hide&Seek, Inc. | Hide&Seek","description":"Hello, everyone. We at Hide & S Co., Ltd. provide a full-service management agency that handles all aspects of your Rakuten Ichiba store.","canonical_url":"http:\/\/www.hideandseek.co.jp\/en\/archives\/7696","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"en_US","og:site_name":"\u682a\u5f0f\u4f1a\u793eHide&Seek\uff5c\u30cf\u30a4\u30c9\u30a2\u30f3\u30c9\u30b7\u30fc\u30af \u4e16\u306e\u4e2d\u306b\u96a0\u308c\u3066\u3044\u308b\u512a\u308c\u3066\u3044\u308b\u3082\u306e\u3092\u5e83\u3081\u305f\u3044","og:type":"article","og:title":"\u3010\u30ce\u30f3\u30c7\u30b6\u30a4\u30ca\u30fc\u30fb\u30c7\u30b6\u30a4\u30f3\u521d\u5fc3\u8005\u5fc5\u898b\u3011\u30af\u30ea\u30c3\u30af\u3055\u308c\u308b\u30d0\u30ca\u30fc\u30c7\u30b6\u30a4\u30f3\u306e\u57fa\u672c\u306810\u500b\u306e\u30dd\u30a4\u30f3\u30c8\uff5c\u682a\u5f0f\u4f1a\u793eHide&Seek\uff5c\u30cf\u30a4\u30c9\u30a2\u30f3\u30c9\u30b7\u30fc\u30af","og:description":"\u307f\u306a\u3055\u3093\u3053\u3093\u306b\u3061\u306f\u3002 \u697d\u5929\u5e02\u5834\u306e\u3059\u3079\u3066\u3092\u304a\u4efb\u305b\u3044\u305f\u3060\u304f\u904b\u7528\u4ee3\u884c\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3001 \u682a\u5f0f\u4f1a\u793eHide\uff06S","og:url":"http:\/\/www.hideandseek.co.jp\/en\/archives\/7696","article:published_time":"2023-06-23T07:43:24+00:00","article:modified_time":"2025-10-27T02:10:40+00:00","twitter:card":"summary_large_image","twitter:title":"\u3010\u30ce\u30f3\u30c7\u30b6\u30a4\u30ca\u30fc\u30fb\u30c7\u30b6\u30a4\u30f3\u521d\u5fc3\u8005\u5fc5\u898b\u3011\u30af\u30ea\u30c3\u30af\u3055\u308c\u308b\u30d0\u30ca\u30fc\u30c7\u30b6\u30a4\u30f3\u306e\u57fa\u672c\u306810\u500b\u306e\u30dd\u30a4\u30f3\u30c8\uff5c\u682a\u5f0f\u4f1a\u793eHide&Seek\uff5c\u30cf\u30a4\u30c9\u30a2\u30f3\u30c9\u30b7\u30fc\u30af","twitter:description":"\u307f\u306a\u3055\u3093\u3053\u3093\u306b\u3061\u306f\u3002 \u697d\u5929\u5e02\u5834\u306e\u3059\u3079\u3066\u3092\u304a\u4efb\u305b\u3044\u305f\u3060\u304f\u904b\u7528\u4ee3\u884c\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3001 \u682a\u5f0f\u4f1a\u793eHide\uff06S","twitter:image":"https:\/\/www.hideandseek.co.jp\/sin\/wp\/wp-content\/uploads\/2022\/12\/thumbnail.jpg"},"aioseo_meta_data":{"post_id":"7696","title":null,"description":null,"keywords":null,"keyphrases":{"focus":[],"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"titles":[],"descriptions":[],"socialPosts":{"email":[],"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2022-12-22 00:38:03","updated":"2026-09-16 02:19:11","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"views":6312,"_links":{"self":[{"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/posts\/7696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/comments?post=7696"}],"version-history":[{"count":20,"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/posts\/7696\/revisions"}],"predecessor-version":[{"id":8965,"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/posts\/7696\/revisions\/8965"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/media\/7697"}],"wp:attachment":[{"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/media?parent=7696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/categories?post=7696"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.hideandseek.co.jp\/en\/wp-json\/wp\/v2\/tags?post=7696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}