WebデザイナーがデザインするWebページの一つに、広告を経由して1ページ内で商材の特長を説明し、お問い合わせや購入へと導く「ランディングページ」があります。 ランディングページは、ユーザの興味を惹くビジュアルの魅力（シズル感）を特に強調したり、瞬時に内容を理解させるためのメリハリのコントロール力も特に求められるため、高いクオリティでページ全体をまとめ上げるには、幅広い表現力が求められます。 私もこれまで多くのランディングページのデザインに関わってきましたが、過去を振り返ると、制作に与えられる時間はタイトな割に、ページ内に掲載するボリュームは非常に多く、またメリハリを出すために様々な表現をいくつもの箇所で検討しなければならない、というケースが多々ありました。 デザイナーにとっては、いかにして効率的に、早く、且つ高品質でランディングページをデザインするのか？が大きな課題になるわけですが、多く

カンプのデザインやパーツの作成など、Webデザインにも欠かせないPhotoshop。もっとラクに、もっと速くWebデザインするために、すぐに役立つ4つの時短テクニックを紹介します。 サイズ違いのバナーはまとめて使い回し Photoshopでよく作るモノの1つといえば、バナー。掲載場所や配信先によってサイズが異なるバナーをバラバラに作成すると使い回しが面倒だし、写真や文言に変更があったときにいちいち直すのが大変ですよね。 いろんなサイズのバナーを1つのPhotoshopファイルにまとめて作成し、写真やロゴをスマートオブジェクトで一元化しておくと、バリエーションをスピーディに作れ、修正にも対応しやすくなります。 例として、大中小の3つのバナーを一気に作ってみましょう。作成する最大サイズのバナーが収まるように新規ドキュメントを作成し、大きいサイズのバナーから作成します。 レイヤーに素材を配置して

先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

先日書いたブログに、先輩がこんな風にコメントしてくれたにもかかわらず、がっつりハマったので戒めのためにもメモしておきます。 なにが起きたか 要件としては、高さの違う2つのボックスを横並びにして、上下中央寄せにする、というものでした。 <div class="wrapper"> <div class="left">左は<br>二行</div> <div class="right">右は一行</div> </div> .wrapper div { float: left; } とりあえず、横並びだからfloatを指定して、上下中央寄せはvertical-alignを使えばいっかと思っていたら、全然そんなことなかった。（ちゃんと仕様を理解しないでなんとなく使っているからこうなる） .right { display: table-cell; vertical-align: middle; } とか

Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法 こんにちは、デザイナーのぺちこです。 AdobeのCC2015がリリースされて2ヶ月ほど経ちましたね！ 恥ずかしながらPhotoshop以外はまだ2015を導入していなかったため、先日どーんとアップデートに挑みました。 とはいっても、どんなアップデートがあったのか分からないままでは宝の持ち腐れ。新機能を色々と調べていたところ、いつの間にかDreamweaverがとても便利になっているらしいということを知りました。 どうやらDreamweaver CC2015では、 レスポンシブサイトのコーディングに便利なビジュアルメディアクエリーバーやリサイズバーの追加 Bootstrapのサポート Emmetの標準サポート 手軽にブラウザや実機で確認ができるデバイスプレビュー機能の追加 な

同一コンテンツでありながらPC用とモバイル（スマホ）用のURLが別になっている場合、コンテンツが重複していると判断されてしまい、SEO上不利に働く可能性があります。そのためにも、PC用とモバイル用のURLの関係性を正しく検索エンジンに伝える必要があります。ここでは、モバイル用URLがPC用途は別に存在する場合にやるべき3つの対策を解説します。 モバイルを取り巻くSEOは、当記事が最初に書かれた2014年頃に比べて大きく状況が変わっています。「モバイルSEOとは」「モバイルフレンドリーとは」「AMPとは」「MFI（モバイルファーストインデックス）とは」などの記事もぜひ合わせてご確認ください。 この記事のポイント PC用とモバイル用のURLが別々であると、重複コンテンツと判断されてSEO上不利になる alternateタグ、canonicalタグ、302リダイレクトで対策する 可能であればPC

フィリピンのSEO/デジタルマーケティング会社「leapfrogger」が「The Ultimet SEO Checklist」（ザ・アルティメット・SEO・チェックリスト）を公開しています。 SEO対策において必要なチェック項目を、 リサーチ ページ内のSEO ページ外のSEO その他 の４項目に分けてインフォグラフィック形式でまとめています。ちなみにかなり縦長の画像でちょっと載せきれないため、リンク先で確認してください。 SEO対策で結果を出すためにはやることがたくさんありますが、このチェックリストを見れば抜け漏れが無いかザッと確認する事ができます。 中には海外でしか通用しないノウハウも含まれていましたが、普通に全国共通でチェックすべき項目を日本語で紹介させてもらいます。 こういうSEOのタスクをチェックリスト化したインフォグラフィック、僕もいつか作りたいなと思っていたのですが、こっち

メモしていたものが溜まってきて一覧化したのでシェアします。 以前にもCSSのみでボタンデザインやホバーエフェクトを実装できるエントリーを書きましたが、今回はCSSのみで実装するゴーストボタンと相性が良さそうなホバーエフェクトのサンプルです。 もちろんゴーストボタンに限らず様々なタイプのボタンで使用でき、対応しているブラウザであればコピペで簡単に実装できると思うので、気になるエフェクトがあれば是非使ってみてください :) 閲覧の際にChromeまたはFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近

マージンを制するものがスマートフォンデザインを制す！〜iPhone6/6Plusの登場で、マージンがどう変化したのか〜 デザイナーの亀谷です。 突然ですが、スマートフォンのデザインで、大きく差が出るポイントはどこだと思いますか。 もちろん意見は様々あると思いますが、私が考える最も大きなポイントは「マージンの取り方」です。 そこで今回はその「マージン」をテーマに、iPhone5とiPhone6/6Plusのマージンの変化に関してお話したいと思います。 マージンを制するために重要なもの 美しいマージンの取り方には知識と経験が非常に重要です。 水野学氏の著書「センスは知識からはじまる」にもあるように、美しいマージンの取り方においても知識が非常に重要です。 私は、具体的には以下の3つの目線から日々インプットを行っています。 常日頃から可能な限り多くのサービスに触れることで、感覚を養う。 美しいと感

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。 ※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。（GPLやMITやCCなど主要ライセンスの内容と意味のまとめ） もくじ レスポンシブ対応！PCでも、スマホのフリック操作でも使えるスライダー サムネイル付きでページングもできるフォトギャラリー スクロールに合わせて表示させたい パララックスさせたい 背景画像を画面サイズにあわせて表示させたい フルスクリーンでスクロールさせたい スクロールするとヘッダーを固定させたい 順番にアニメーションさせたい テキストをアニメーションさせたい

2013年4月17日 フォント キャッチコピーや見出し、ちょっとした装飾に使える英字フォントを紹介します。どれも無料で商用利用もできるなんてすごいですねー！個性的すぎて読みづらいものも多いので、読んでほしい部分や本文には不向きです。大きくどどーんと使っちゃいましょう！ ↑私が10年以上利用している会計ソフト！ Salt & Foam まるっこいシェイプと複数の細いラインがとっても綺麗ですねー！ライセンスの明記はありませんでしたが、メールで確認したら商用利用OKとの事です。 Feel free to use the font in your commercial work, as it is publicly licensed. Enjoy! PAPERWORK 紙を折りたたんだようなフォント。ラインや水玉模様入りもあります。 Costura クロスステッチ刺繍風のおしゃれフォント。加工する

2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！（あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw） ↑私が10年以上利用している会計ソフト！ 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ

腕時計のセレクトショップＴｉＣＴＡＣ（チックタック）の公式サイト。「服やシーンに合わせたスタイリング」「大切な人へ贈る特別なギフト」「所有する楽しみを満たすコレクションアイテム」など、様々な切り口で腕時計の魅力を提案、最新ニュースを発信しています。

初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM