バナーデザインの参考になるサイト9選
限られたスペースの中でターゲットに訴求しなければならない「バナー」のデザイン。「つい似たようなデザインばかり作ってしまう」「いまいち広告としての訴求力がない仕上がりになる…」など、バナー制作に悩むWebデザイナーの方もいるはず。今回は、そんなときにデザインの参考にしたいバナーまとめサイトをご紹介します。 ＜この記事に関連する記事＞ クリックしたくなるバナーを作るためのコツまとめ Webデザイナーに求められるスキルレベルは？未経験でも最低限必要なのは？ Webデザイナーは副業にできる？案件獲得の方法も解説 バナーデザインの参考になるサイト9選 Retrobanner http://retrobanner.net/ 7000種類以上（2017年3月現在）の広告バナーを集めて一覧表示しているサイト。サイズ、色、業種、テイスト（シンプル、かわいい、など）でカテゴリ分けできるので、制作するバナーのデ
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ
![[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e06dab83915ff3fa91a0d356ebe7f551b51c01f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012101.png)
Webにも紙にも使える、囲み枠デザインの基本テクニック
2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20％オフ！」「期間限定！」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時
誰にでも起こりうる…サイトをリアルタイムでミラーリングされて検索上位を奪われたお話［不正コピー、ダメ。ゼッタイ］
こんにちは！みぞれ（@xxmiz0rexx）です。 たまに見かける「記事の内容を丸ごとコピーされた！」という嘆き。 「大変だなぁ…」なんて眺めていた私ですが、今回なんと記事の文章どころか、サイトが丸ごと不正コピーされる(URL以外で判別がつかない)というとんでもない被害に遭いましたので、私が行った対処法をまとめておきます。 経緯 事の始まりは10/21。 Googleの検索結果を見ていたら、わたしの運営するフリー写真素材サイト『GIRLY DROP』のタイトルの下に見知らぬURLがついてました。 「むむ…？」と思いクリックしてみると、そこにはうちのサイトがありました。 「？？？？」 さらに、表示されている写真をクリックして詳細ページを確認してみようと思いました。 カチッ 思いっきりイケナイ大人のWEBサイトが表示されたんですがこれは( ﾟдﾟ)ﾎﾟｶｰﾝ トップページ、写真のダウンロードペ
【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか？ Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
ブログやサイトのパフォーマンス改善やセキュリティ向上のためによく使う.htaccessの設定のまとめ
ブログやWebサイトのパフォーマンスの改善やSEO、セキュリティの向上に役立つ.htaccessの設定を紹介します。 ドメインをwww有り・無しに統一、新ドメインに引っ越した時のリダイレクト、URLをクリーンなものにしたり、共有サーバーでのPHPのバージョンを指定したりなど、すぐに利用できるものばかりです。 .htaccess Snippets -GitHub 元記事には有用な.htaccessのスニペットがPublic Domainでまとめられおり、それら全部に加えて.htaccessファイルの作成と使い方を加えました。 .htaccessファイルの作成と使い方 リライトとリダイレクトの設定 セキュリティの設定 パフォーマンスの設定 その他のいろいろ有用な設定 .htaccessファイルの作成と使い方 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリ
背景のデザインに迷った時に！これから使ってみたい背景素材のまとめ
落ち着いたデザインにもあうシックなグラデーション、繊細な幾何学柄を使ったパターン、コピーやロゴを鮮やかに見せる背景など、アイデア満載ときめくようなデザインテクニックを使って作成されたものから定番ものまで、無料の背景素材を紹介します。
SNSのボタンをまとめて配置する【jQuery連載08】 | HTML5でサイトをつくろう
自身のサイトやブログを拡散させるために使用するソーシャルボタンですが、それぞれ使用するサイトからひとつづつ作成することはできますが簡単にまとめて設置ができるプラグイン「jQuery.socialbutton」を使用してソーシャルボタンを設置してみます。 今回作成したサンプル 【サンプル】ソーシャルボタンをまとめて配置する http://www.html5-memo.com/sample/jq-books/17 プラグインの導入 各種ソーシャルネットワーキングサイトの「いいね！」ボタンを導入できるプラグイン「jQuery.socialbutton」（http://itra.jp/jquery_socialbutton_plugin/）。 まずはjQuery本体とjquery.socialbuttonプラグインを読み込む 挿入できるソーシャルボタン facebookいいね facebook S
[WordPress]ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10
ログイン画面のロゴ変更 まずはおなじみのカスタマイズから。 WordPressロゴをサイトのロゴに変更します。複数のメディアを運営している時などに判別しやすいです。 functions.php内 //ログイン画面のロゴ変更 function login_logo() { echo '<style type="text/css"> #login h1 a { background: url('.get_template_directory_uri().'/images/login_logo.png) no-repeat; width: 320px; height: 70px; background-size:100% auto; } </style>'; } add_action('login_head', 'login_logo');
![[WordPress]ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c6e8d439bbe9e018807c9d2af64018ebe3412b1/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2FDashboard-Customize-TIPS-10.png)
CSSだけでお手軽なフリック&ドラッグスライダーを作る | バシャログ。
今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe
コピペだけ！CSSでWEBデザインの幅が広がる便利テクニック集 | Code部
なるべくスマートなソースで効率良く実装したいの開発者というもの。そんな方のためにCSSだけで様々なデザインができてしまう疑似要素と疑似クラスの活用方法をご紹介致します！吹き出しデザインなどのよく使うテクニックも紹介していますので、ぜひご覧るださい！前回の『知らなきゃ損！?リンクの色をお洒落に変えるCSSテクニック！』では擬似要素と擬似クラスの基本的な概要と使用例をご紹介しました。今回の実践編では、擬似要素と擬似クラスを応用した実践的なデザイン＆コーディングテクニックをご紹介していきますね！実践編では、基礎編でご紹介できなかったプロパティも登場します。どれも便利なプロパティなので、是非使い方を抑えて頂ければと思いつつ、それでは早速、実践的な使用例をご紹介していきますね。 擬似要素や擬似クラスの実践的な使用例 色違いのリスト 擬似クラス:nth-child()を使ってリストの偶数行と奇数行のス
ノンデザイナーでもできる！写真を使ったイケてるメイン画像の作り方 - CAMPHOR- Tech Blog
こんにちは、あんみつ（@murata_atsumi）です。 この記事はCAMPHOR- Advent Calendar 2014の20日目の記事です。 私ブログが超苦手で普段からあんまり書かないから、何書こうか迷ったのですが、 一応CAMPHOR-には主にデザインの部分で関わることが多いので、 デザインのことを書こうと思います！ はじめに エンジニアの皆さん、そしてそうじゃない皆さんも、たまに『メイン画像』を作らなければいけないときがあるんじゃないでしょうか。 メイン画像というのは、こういうのとか （引用：https://www.cyberagent.co.jp/recruit/fresh/internship/ ） （引用：http://tokyometro10th.jp/future/opendata/ ） こういうのとかですね。 または、Facebookページのカバー画像や、OGP用
Webデザインのパーツを作る時参考になるパーツギャラリーサイト14サイト ｜https://wp.yat-net.com/name
2014年 12月 15日 Webデザインのパーツを作る時参考になるパーツギャラリーサイト14サイト カテゴリ： Webデザイン タグ：ギャラリーサイトデザイン作成まとめ Webサイトをデザインする際、「この部分のデザインどうしようかな？」っていう事が結構あるのですが、パーツに特化したギャラリーサイトがいくつかあるので、記事にまとめておきます。よく知られているサイトが多いのですが、是非ご参考になればと思います。 Croppy http://croppy.org/ twitter等で仲良くさせて頂いているなつきさん（@Stocker_jp）が運営されてるサイトです。自分が保存したいサイトのキャプチャをブラウザ上で切り取り、アーカイブにして掲載することが出来ます。 ブブンデザインアーカイブ http://bubundesignarchive.jp/ ブラウザに表示しているパーツをPhotosh
動作推奨環境 例文・テンプレート / Maka-Veli .com
もっとあると思うけど、とりあえずよく使いそうなヤツまとめました。 必要に応じてご自由に加筆・コピペしてご使用ください。 当方、責任は一切負いません。 コピペの場合、URLとOS/ブラウザ等のバージョンに気をつけてください。 推奨環境 OS Windows Vista、Windows 7、Windows 8、Mac OS X 10.4以降 ブラウザ Internet Explorer 9 以上 Google Chrome 最新版 Firefox 最新版 Safari 最新版 ※使用しているバージョンを確認する方法についてはこちらからご確認ください。 Windows Mac PDF PDFファイルを閲覧する場合にはAdobe® Reader® (Acrobat Reader 7.0以上)が必要となります。 Adobe® Reader® のダウンロードはこちら 動画 動画を視聴す
Webコンテンツの成果が上がるレイアウトの法則とは？ | 誰も語らなかったWebコンテンツ作成技法
優れたコンテンツ構成の鉄則を探る！優れたコンテンツとは顧客の悩みを解決できるため、検索やお気に入りから訪問者を獲得できます。そして、そのコンテンツは別のページに誘導する力があり、しかもゴールに結びつける力があります。 前回説明したように、こうしたコンテンツは、天才的なアイデアや人並みはずれた文章力で作られるのでしょうか。実際にはそうではありません。普通のビジネスパーソンが、普通に考え、普通の文章力で作ったものが成果を上げているのです。 意図的ではない分、成果が小さいことがもったいないのですが、これを意図的に行っていけば、狙った成果をより大きなものにできるはずです。それでは、コンテンツの成果が上がる構成とはどんなものなのか解説していきます。 コンテンツの見出しは画像を使わず2行のテキストで作る前回説明したように優れたコンテンツは、検索集客力が高く検索から顧客と出会う力を持っています。検索から
[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ
TL;DR 前回（あのサイトでさりげなく使われていた CSS 小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。 インタラクティブ １．マウスオーバーで自動スクロールさせる 最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。 html <div class="box-fixed"> <div class="field-wrap"> <div class="field-detail"></div> </di
![[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fee8f1468dfd9f1f2b34b6da4ca43e4f44c4df/height=288;version=1;width=512/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fai_css_interactive_trends.png)
[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
![[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a545d68e72312cfa64f79c7d1932afa3d3078686/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120205-19.png)
和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました
2017年7月14日 Webデザイン, ダウンロード, 色彩 今月はじめに初めて箱根旅行で洗練された美しい温泉宿に宿泊して以来、「和」な雰囲気やデザインの素晴らしさに魅了されたManaです。伝統的な配色や配置、書体等、見ていて飽きの来ない魅力がありますよね！和風デザインには大きく分けて4つの特徴があります。それぞれの特徴を理解し、うまくデザインに反映していきましょう！ ↑私が10年以上利用している会計ソフト！ 1. 配色 「和風デザイン」と聞いて思いつくのはどんな色でしょうか？おそらくビビッドなピンクや透き通るような水色ではなく、わさびやからし、えんじのような、少しくすんだ色合いを思いつく人が多いかと思います。日本には伝統的な色や配色というものが存在し、それらを上手に使うことでグッと和の雰囲気漂うデザインに近づきます。 伝統色 日本の伝統色 和色大辞典では日本の伝統色をカラーコードとともに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
