『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ:幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
首相官邸の公式ホームページが2012年4月2日、リニューアルされた。 これが「お金をかけすぎている」とインターネット上で批判の嵐となっている。増税や公務員削減などが実施されようとしている中、無駄使いではないかという声が多くあがっているのだ。 首相官邸HP、リニューアルに4500万円 ネットで怒りの声 「もっと安くできる」 – J-CASTニュース この記事ですが、ネット上での「高い」という声は一般消費者感覚としては理解出来ますが、Web業界で働く私の周囲のリアルな同業者からも、ネット上の一般の方と同じように「高い」「騙されてる」「金のムダ使い」というような意見が出まして、ちょっと違和感を覚えました。 また一方で、同業の方でも実際このクラスの規模の案件を受託しているような受託業者さん界隈からは「これくらいはかかる」「この金額以下だと受けられない」という声も聞かれました。 私は後者の声に同感で
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。 切り抜き・マスク作業で、もうイライラしない! 誰でも、切り抜き30秒・調整30秒で完成できる方法。 WEBサイトやLPのキービジュアルでは画像を使うことが多い。 しかし、お客様から素晴らしい画像の支給があるとは限らない。 「これ、マスクしないといけないじゃないか!」 昔からマスク専用のアプリケーションがあるほど、 マスク作業・切り抜き作業というのは 利益にならないのに、手を抜けない根気が必要な作業。 しかし、今なら誰でも簡単に、1分あればできる。 今更だが、やっとAdobeのCS5シリーズをまともに使い始めたので ここで、Photoshop CS5を使った、超簡単マスク術を紹介したい。 お題の写真 こちらが今回のお
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量:10で追加します。これが同心円状のヘアラ
これからWebデザインやコーディングの勉強を始めたい方、またはWebデザイナーになったばかりの方向けのまとめ記事です。 「無料で始められる…」とか「本を買わなくても…」などのテーマにしようか迷ったのですが、無料ではじめられる記事としては、既にネタ帳さんの以下のようなエントリ↓がありますので、ここでは純粋に私がおすすめしたい記事、本、サイト、ソフトなどを有料無料に関係なく紹介したいと思います。 Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳 デザイナーからデザインの基礎や原則を学べるエントリーまとめ(webデザイナ向け)*ホームページを作る人のネタ帳 あと、渋谷でWebデザインスクールを開講しています。 詳しくはこちらの記事 をご覧下さい。 デザイン基礎 年末年始にWebデザインを学び直すための3つのステップ いきなり手前味噌で申し訳ないですが、これからWebデ
Item Blur Effect with CSS3 and jQuery 他アイテムをボカして強調表示するCSS3&jQueryサンプル 次のようにアイテムを浮き上がらせることでアイテムを強調させる例です。アイテムが多いと分かりづらい場合がありますが、強調表示してあげることで分かりやすくできます。 色々な場面で活用することができそうですね どんどん表現力が上がっていくのはいいことですね。 関連エントリ カッコよくデザインされたピュアCSS3なアコーディオン実装デモ リボンが可愛いCSS3によるドロップダウンメニュー実装チュート フルスクリーン背景がスライドショーになるCSS3サンプル CSS3のブラウザ別対応がアイコンで超分かりやすいサイト
採用活動を目的としたオウンドメディア(オウンドメディアリクルーティング)を運営し始める企業が増えています。一方で、どんなテーマで更新すればいいのか悩んでいる担当者も多いのではないでしょうか。 今回は、実際に企業の公式オウンドメディアページ内に取り入れられているコンテンツをテーマごとに事例をまとめました。個性的なコンテンツをもっと充実させて作りたいときのヒントにしてみてください。 1、就活生・転職者に向けたメッセージ 採用のためのオウンドメディアの目的は、自社の採用ポリシーや欲しい人材、自社の目指す方向性、社長からのメッセージなど、就職活動中の学生や転職者に向けたメッセージを発信することです。 まず最初におすすめなのが「就活生・転職者に向けたメッセージ」です。採用オウンドメディアを作ったら、一番目に公開したいコンテンツです。特に印象的で、共感を呼ぶメッセージを選んでみました。 経営陣、社員、
デザイン上級者は、中級者と初心者と何が違うんだろう?って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
Movable Typeでパンくずリストを作る方法です。当ブログでオーソドックなパンくずリストの作り方の記事がまだなかったので、本エントリーでまとめることにします。 1.カテゴリアーカイブページにパンくずリストを表示 カテゴリアーカイブページに次のようなパンくずリストを表示します。 スクリーンショットのように表示するには、カテゴリアーカイブページ用のテンプレート(「カテゴリ別ブログ記事リスト」テンプレートなど)に以下のサブテンプレートをはりつけます。 <div class="breadcrumb"> <a href="<$mt:BlogURL$>">TOP</a> » <mt:ParentCategories glue=" » "> <a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a> </mt:
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください! ↑私が10年以上利用している会計ソフト! 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
このブログではないですが、Google Analyticsを見るとスマートフォンからのアクセスが結構あったので、スマートフォン向けのサイトを作ってみようと思いました。 ただ、スマホ向けのサイトは作ったことがないので、まず実際に色んなサイトを見て参考にしようと思い、ギャラリーサイトを調べてみました。 国内ギャラリー まずは国内サイトです。iPhoneが中心になっています。この3つのほかにも色々ありましたが、内容的には似ているので、更新頻度や使いやすさなどを基準に選びました。 iPhoneデザインボックス 画像が大きく見やすいです。個別ページでは画像も多くPCサイトとの比較もあってとても使いやすいです。カテゴリもしっかりしています。 iPhoneデザインアーカイブ 掲載サイト数が多く、更新頻度もかなり高いです。 スマートフォンサイト集めました。 すっきりしたデザインで見やすいです。カテゴリも業
shutto(シュット)サービス終了 PCサイトのスマホ変換サービス「shutto(シュット)」は、2024年3月31日をもってサービスを終了しました。 今まで多くのお客様にご愛顧いただきましたこと、スタッフ一同深くお礼申し上げます。 ※Webサイト多言語化ツール「shutto翻訳」は「shutto」とは別サービスとなります。 「shutto」はサービス終了となりますが、「shutto翻訳」には影響ございません。 「shutto翻訳」はこちら shutto終了後のスマートフォン変換にお困りの方 株式会社アイスリーデザイン様が提供している「flamingo」サービスでスマートフォン変換が可能です。 詳細は株式会社アイスリーデザイン様にご確認ください。 ■「flamingo」に関してのお問い合わせ先 株式会社アイスリーデザイン 営業本部: 担当 原島(はらしま)/野林(のばやし) お電話でのお
ウェブサイト作成時に役立つ7つのテクニック、第5回のテーマは「リンクの装飾と配置」です。ユーザにとって使いやすいリンクの装飾や配置のサイトを作成するためのポイントをお伝えします。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 ←今回のテーマ 目線の操作 他サイトでの慣習 ウェブサイトでは、ユーザがリンクを見つけることができなければどんなにユーザの関心を引くページやコンテンツを用意しても、まったく見られないまま終わってしまう危険性があります。 そこで、今回は「リンクの装飾と配置」をテーマに、ユーザがスムーズにページ間を遷移することが可能な、回遊性の高いサイトを設計するためのポイントをお伝えします。 まずはリンクの装飾について、テキストリンクとボタンリンク、それぞれのポイントを順に解説していきます。 1. テキストリンクの装飾 テキストリンクは青字下線で表すことによ
MEOとは「Map Engine Optimization(マップエンジン最適化)」の略称で、地図検索や通常検索で自社の店舗情報を検索ユーザーに見つけやすくするための対策を指します。 MEOは店舗ビジネスや地域ビジネスにおいて、ウェブマーケティング上の重要施策の一つです。 比較的即効性が期待でき、費用はSEOに比べて安価。リスティング広告などと違って自社のアカウントに蓄積効果(資産性)も見込めることから、店舗ビジネスにおいては必須の対策となっています。 MEO(Map Engine Optimization)は、ローカルビジネスがGoogleマップや他の地図検索エンジンで目立つための重要な手法です。特に日本国内では、地域密着型のビジネスが多く、MEO対策は顧客獲得に欠かせない要素となっています。この記事では、MEO対策で上位表示を達成するための具体的な施策と重要な要素について詳しく解説しま
ブログやウェブサイトのパフォーマンス改善や運営・セキュリティに役立つ「.htaccess」の設定を紹介します。 .htaccess Files for the Rest of Us [ad#ad-2] 下記は各ポイントを意訳したものです。 リダイレクトとリライト オリジナルのエラーページ 特定のリソースへのアクセス制限 特定のIPのアクセス阻止 IEのレンダリングモードの設定 有効期限を設定してトラフィックを軽減 gzip圧縮の利用 リダイレクトとリライト リダイレクト サイトを移転したなど、永続的なリダイレクトには「HTTP301リダイレクト」で設定します。 転送先のURLは絶対URLで指定します。 Redirect 301 ^old\.html$ http://ドメイン/new.html リライト リライト(書き換え)をする場合は、下記のようになります。 RewriteEngine o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く