『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![美しい無料UIエレメント素材35個まとめPhotoshopVIP |](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d141a111f8dd0b47b5427fecad987b8bfcbae54/height=288;version=1;width=512/https%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2014%2F06%2Flatestui2014june_top.jpg)
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか?SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト! 2014年7月3日 追記:SVGスプライトの書き方について修正&追記しました。 SVGってなに? SVG(Scalable Vector Graphics)はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
みなさんどうも〜こんにちはぁ! 日々レベルアップを目指してWebを学んでおりますライターの、のび太です。 以前「Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個」という記事を書かせていただいたのですが、予想以上に好評で驚きました。お役に立てて光栄です! そのときご紹介したブログの他にも、まだまだ有益で素晴らしい国内ブログはたくさんあります。そこで今回は、「やばい! マジで有益すぎる! ありがてぇ!」と感じたブログを、制作系とSEO系とに分けて、計10個ほどご紹介したいと思います。 今まで知らなかったという人は、ぜひこの機会にRSS購読を! 制作系 以下7ブログが、デザイン、コーディング、CMSなど制作系の内容になります。 NxWorld http://www.nxworld.net/ どの記事もシンプルかつ丁寧な説明で非常にわかりやすいです。特にWordPressカスタマイズ系の
作成:2014/05/19 更新:2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 1.画像読み込み時、ローディング画像を表示/jQuery 2.読み込み時に文字を動かす/jQuery ヘッダー 3.文字の拡大・縮小/jQuery 4.入力補助/jQuery 5.伸縮するサーチボックス/jQuery コンテンツ 6.中心に水平線を入れる/CSS 7.均等に並べる/段組み/CSS 8.コンテンツが現れた時にアニメーションさせる/jQuery 9.マウスホバーで画像を拡大しキャプションを出す/jQuery 10.マ
こんにちは。日本ディレクション協会 関西支部の出原です。 関東では既に何度も開催されている「0からのWebディレクション講座(通称0ディレ)」が、ついに関西でも開催されたので、今回は参加レポートの形を取りながら、そこで得た学びや思ったことなどをまとめてみたいと思います。 まずは資料スライド公開から これを見るだけでもほぼ内容が把握できてしまいますが、せっかくなので以下に要点と個人的な留意点をまとめておきました。 ぜひぜひお役立てください。 コンテンツインデックス 前提となる背景、目的、課題を明確に言語化 ポジションの把握とコンテンツ設計 より具体的なユーザー定義 全ての根拠となるゴールをハッキリ設定する 1.前提となる背景、目的、課題を明確に言語化 今回喋っていただいたのは、東京講演でも人気講師としておなじみの高瀬さん。 プロジェクトの裏側にどんな背景があって、どんな課題があって、それをど
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
2015年2月1日更新 日曜日の午後になると、は~もう休みも半日か~と考えてしまう鈴木です。 今まで、いろいろとGoogle Analyticsの事を書いてきましたが、ココらで1度きちんと体系立てて自分でも後で確認出来るようにして行きたいと思いましたので、連載風にグーグルアナリティクスの設定や見方について書いていきます。大体、このカテゴリーは隔週で1回くらいの(他のネタの数による)の更新で考えています。 第1回は、Google Analyticsの基本となる「登録」についてです。 出来る限り初心者用に書いていきますが、最低限のラインを設定しないと際限が無いため、Gmailの登録が出来て、ブラウザでGmailを読める人以上を対象としています。 Google Analyticsへの登録 Google Analyticsのトップページへ グーグルにログインした状態で、グーグル・アナリティクスのト
これは凄いかも知れない…。 最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。 日本の業務システムと言えばExcel方眼紙がデフォルトです(断定)。そのUIに慣れ親しんだ人のためのグリッドレイアウトフレームワークがjagridです。 jagridの使い方 こんにちは、Excel方眼紙! うん、まさにExcel方眼紙です。 表はまさにお手の物。 セル3つ分、といった指定も簡単にできます(data-widthで指定)。 従来のWebコンポーネントと合わせることもできます。ちゃんと文字の頭が合っているのに注目。 こんな緻密な画面も簡単に設計できます。 Webデザインにおいてこれほど緻密な画面を設計しようと思うと、かなり苦労するはずです。しかしja
2014年4月20日、FacebookがF8カンファレンスでApp Linksというアプリ間連携のための新しい仕組みを発表しました。App Linksではこの仕組みをオープンにし、全ての開発者が利用できることを目標としています。 FacebookアプリからTumblrの記事を開こうとしたらアクションシートに「Tumblrで開く」があります。これがApp Linksで実装できます。 簡単な機能紹介はニュースサイトから引用します。 アプリ開発者は、アプリのコンテンツに数行のコードを追加することでApp Linkメタデータをパブリッシュできる。このコンテンツにリンクするアプリはメタデータを利用してアプリに“deep-link”できるようになる。例えば映画紹介アプリ内に映画のチケット販売アプリへのリンクをApp Linksで入れておけば、ユーザーは映画紹介アプリからチケット販売アプリを直接開いてチ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
WEBサービスにおけるセキュリティ対策の基礎 近年WEBサービスの脆弱性が騒がれておりますが、果たしてあなたが運用しているサイトのセキュリティは大丈夫でしょうか?以下、チェックしておくべきセキュリティ項目をあげました。 SSL証明書の利用 ユーザのプライベートな情報を送信してもらいサーバに保存するようなサービスではSSL認証は必須の機能と言えるでしょう。SSL認証を行っていないと、大切なユーザの情報が外部の悪いユーザに見られてしまう可能性があります。 ※ちなみにGozal-mediaではプライベートな情報のやり取りは行っていないためhttpで通信を行っています。 【確認方法】 ・ユーザ情報を送受信するページのURLが「https」から始まっている事を確認 ・「https」のページにアクセスした際に「セキュリティ証明書が信頼できない」という用な表示が出てこない事を確認 【導入方法】 導入
こんにちは、工藤です。 Webデザインの際、パーツで悩んでしまうことがよくあります・・。 今回はパーツ毎にまとめてくださっているサイトをご紹介します。日本語サイトが多めです。 パーツ全般を集めているサイト ブブンデザインアーカイブ http://bubundesignarchive.jp/ Croppy http://croppy.org/ MephoBox http://box.mepholio.com/ メインビジュアル関連 WEBデザインのメインビジュアルまとめ http://mainvisual.net-king.com/ MAIN VISUAL collection http://mvisual-collection.dslrs-journal.info/ 見出し関連 見出しデザイン.com http://midashi-design.com/ Typography For He
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか? <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化(拡大)する機能があります。 読
One of the hardest elements is concocting a great lede; ledes being the one chance you have of persuading readers to commit to an article in full. Here are five tips to start well. Writing for the Web is a skill that's easy to learn but difficult to master. One of the hardest elements is concocting a great lede; ledes being the one chance you have of persuading readers to commit to an article in f
この春から新しく社会人になったり、転職したりして新しい環境にチャレンジしている方は、そろそろ1カ月がたとうとしていることだろう。新しい環境には慣れてきただろうか? 新社会人はもちろん、転職して新しい業界に足を踏み入れた方も、今は覚えることがたくさんあり過ぎて大変かもしれない。できることなら、ちょっと楽して、さまざまな知識を手に入れたいのではないだろうか? 例えば、Web制作現場に入社した人なら、Adobe Creative Cloudをインストールしてもらって「取りあえずDreamweaverだけ使えればいいから」なんて言われてDreamweaverだけやっていると、後でちょっと困ったことになるかもしれない。 なぜなら、Webサイト/サービスの元デザインはPhotoshop(よく「フォトショ」と略される)などで作られた一枚絵で渡されることが、ほとんどだからだ。Photoshopは、慣れてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く