『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
半透明のパネルにテキストを配置したり、ナビゲーションを半透明にしたりなど、ウェブデザインでよく利用される透過のエフェクトの効果的な使い方と注意点を紹介します。 Using Transparency in Web Design- Dos and Don'ts 下記は各ポイントを意訳したものです。 はじめに コントラストを作るために透過を使う イメージの重要な部分は隠さない さまざまなレベルの透明度を使う 透過するとテキストが読みやすくなるとは限らない 透過を使うのは少しのスペースに 激しいコントラストの画像には透過は置かない 透過をアートとして使う 透過を飾りとして使用しない 背景に透過を使う 同時に多くの透過のエフェクトは使わない 循環するイメージに透過を使用する おわりに はじめに 透過を使ったウェブデザインは非常に美しいですが、慎重にデザインする必要があります。透過はカラーのブロック・
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ:領域を拡大 バーの長さが変化していることに注目してください! Perfect Scrollbarの使い方 Step
前回との比較 前回の調査から2年半が経過している訳ですが、今回調べた中でリンクのデフォルト色を使っているサイトはありませんでした。リンクの色はデフォルト色より、やや弱い青色にするというのが浸透してきたように感じます。 NAVERとlivedoorのリンク色が同じになっていたのは経営統合の影響でしょうか。 また、「はてブ」や「にこにこ動画」のように青系でない色を使っているサイトもありました。はてブはリニューアルによって大きく変わったのですが、リンクの色を黒色ベースにしていたんですね。調べるまで気づきませんでした。 最適なリンクの色は? 「リンクは青色」という認識は多くのユーザーに浸透しているので、一般的には青色をベースにするのが無難と言えます。具体的にはデフォルト色だと少し青が強すぎるので、やや”青”を弱くした色がいいでしょう。 但し、サイトのジャンルによっては青色を避けるというのも一つの選
こんにちは、Kanaです。 日本らしい、和のデザインを担当したときに利用した素材サイトや、フリー素材をご紹介します。 和の雰囲気をもった無料で商用利用ができる素材って、そう多くはないんですよね…。 今後また和のテイストのデザインをするときのためにも、まとめておくべく記事にしました。 それでは、素材を提供してくださる方々に頭を下げつつ、ご紹介したいと思います。 商用可のサイトや素材を集めていますが、詳細な規約は、ご利用の際ご自身でご確認ください。 2014/12/10:素材サイトを追加しました。 イラスト素材和柄商用フリー素材 WArgo Pattern(ワーゴパターン) こちらの素材サイトは和素材が非常に充実しています。和風イラスト、和風写真、和柄パターンなど、和デザインを作るにあたり、欲しくなる素材がたくさん集まっています。 WArgo Pattern(ワーゴパターン) 季節素材 夢幻華
タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。 付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。 一応分かりにくいものだけ補足 hrタグについて よく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。 dlタグ、dtタグ、ddタグについて dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うよ
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載!実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その4 目標:実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの:Adobe Photoshop 対象レベル:Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい! これからP
WordPress はとっても便利なブログツール。使い方さえ勉強すれば、HTML や CSSの知識がなくてもWebサイトを作成、運営することができます。そして HTML + CSS を勉強すれば、デザインを自分の好きなように変更することもできます。でも見た目のデザインだけじゃなくて、いろんな機能をつけたりカスタマイズしていくとなると、やっぱり PHP の知識が必要です。WordPress をカスタマイズしたいけど、PHP はまだ ... という人向けに、WordPress と PHP について簡単にまとめてみました。 WordPress は PHP(プログラム言語) + MySQL(データベース) で作られている、人気のブログエンジンです。最近ではブログじゃない一般的な Webサイトを、WordPress で作ってるっていう人も増えてきたように思います。WordPress を使えば、HTM
Opening the Web Platform We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.
(思いっきり個人的な備忘録ですんません。。) 大分今更感満載ですがメモ。 google mapsのデザイン等はご存知の通りStyledMapTypeというAPI等で変更可能で、JavaScriptで変えたい部分の指定してあげる。※Google Map Ver3以降 意味わからん、という場合はGoogle Maps API Styled Map Wizardで、見ながら変更 左のSelectorでゴニョゴニョといじって、右のMap Style、Addを押すとスタイルが指定されます。最終的にMap Style、下部の「Show JSON」をクリックして出てくるのを使用する、と。 jQuery使ってマーカーなんかも出来るみたいです。 APIと少しのjQueryコードでGoogle Mapの地図の色を変更する – かちびと.net GoogleMapsの参考はギャラリーサイトなんかで
先日「アクセス解析しました!」と言ってPVとVisit、アクセス元検索ワード上位25件のアナリティクス画面印刷データ"だけ"を渡されて、思わず切れそうになったナカムラですこんにちは。 今回はそういう意味不明なことをして恥をかかないようになるためのアクセス解析(主にGoogleアナリティクス)の基本について書きたいと思います。また、割とディレクター歴の浅い人向けの内容になる予定ですので、アクセス解析バリバリ!な方には少々物足りない内容になるかと思います。 なんでアクセス解析なんて面倒なことをするんだろう? それは、ざっくり言い切ってしまえば、以下のような事を考えるため。もしくは考えるための指標を探すためです。 ・サイトの「良くないところ」を探して、改善する理由を見つけ出すため。 ・ユーザーが本当は何をしたいのか?を把握して「次このサイトでなんかやるとしたら 何しよう?」を考えるため。 ・ユー
こんにちは、ウェブサービス本部の宮澤です。私は現在、自社コンテンツ内で自社のサービスをPRするため自社広告の管理を担当しています。 NHN Japanには数多くのサービスが存在するため、常時20〜30の自社広告が運用されています。自社広告は細かく効果測定を行うことが可能なので、毎週5〜10のバナーを入れ替えながら最適化を図ったところ、コンバージョン率、クリック率など、ほぼすべての指標で広告効果が向上しました。 自社広告の掲載メディアに関しても、livedoor、livedoorニュース、livedoor Blog、NAVER まとめ、各種アプリと多岐にわたっており、今では新規ユーザー獲得のための重要施策の一つとなっています。 今回は100種類以上の自社広告を制作、運用してみてわかった、効果の高い広告クリエイティブを作るためのコツをご紹介します。 1. 笑顔 VS 泣き顔 まずはLINEの自
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. あなたは、ランディングページのコンバージョン率を定期的に計測して、改善要素を洗い出し、改善策を実施して、少しでも数字が上がるように努力しているだろうか? コンバージョン率は1%変わるだけで、売上は何倍も変わってくる。 例えば、もとの成約率が4%だったのが5%に上がるだけで、売上は125%増になる。さらに、ランディングページを公開してから、3ヶ月、半年、1年と経つごとに、売上の違いは想像できないぐらいに大きくなっていく。 つまり、ランディングページの定期的な計測と改善は、売上の増加に直結する重要な作業だ。 バズ部では、定期的にランディングページの計測と改善をしており、現在、リスト取得ページは73.2%、商品の販売ページは12.1%のコンバー
無料のPSDの素材探しにこれは便利、数多くの素材配布サイトからキーワードで簡単に探せる -PSD Hunter
世界14ヵ国のウェブデザイナーにアンケートをとった、人気のある有料・無料のフォント ベスト10を紹介します。
ブログやウェブサイト・アプリでよく使用するものをはじめ、アプリ、チャート、天気、文具、ホビー、顔文字なども揃っているWindows Phoneをテーマに作成したアイコン素材を紹介します。
10 Photoshop Quick Tips to Improve Your Workflow 下記は各ポイントを意訳したものです。 1. レイヤースタイル パネルでの操作 2. 空の選択範囲の変形 3. 斜めの画像を水平にする 4. 画像に磨りガラスのようなパネルを設置 5. キレイな切り抜きを素早く 6. 瞳のカラーを変更 7. 画質に影響を与えないで照明のエフェクト 8. 作業確認用の新規ウインドウ 9. 画像からカラースウォッチを作成 10. レイヤースタイルをレイヤーの一部に適用 1. レイヤースタイル パネルでの操作 レイヤーパレットの下の「fx」ボタンをクリックすると開くレイヤースタイル パネルで、レイヤースタイルのアクティブ時に直接微調整ができます。 操作可能なスタイルは、4つです。 ドロップシャドウ グラデーションオーバーレイ サテン パターンオーバーレイ 4つのスタイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く