human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
ヒューマンピクトグラム2.0は、非常口のあの人のピクトグラムをTopeconHeroesダーヤマの好みで拡張、ストックしていくページです。 このサイトにストックしたピクトグラムは、WEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。 ただし素材そのものの再配布、販売はNGっす。なお2.0だからって拡張元のピクトグラムに比べ優れている訳ではありません。 犬の散歩のピクトグラムその３ 飛び膝蹴り 社長、部長 ショートカット 手荷物検査 略奪婚 結婚式のピクトグラム 神父、牧師 ちゃぶ台返し 2 水球 ピクトグラム シンデレラ サムライ 3 サンタクロース 2 サンタクロース バーテンダーのピクトグラム2 バーテンダー 銅鑼 銅鑼をドーン 虫取り少年 少年時代 やり投げ 食事をするピクトさん 演説するピクトさん エスカレーター 下校する子供
新Gmailライクな、オーバーレイを利用したシンプルなWebサイトツアーっぽいのを実装するスクリプト・Chardin.js
なかなか良さそうだったので備忘録。最近GmailでUIが少し変更されましたが、その際に使い方をオーバーレイで教えてくれるようになっていました。そんなシンプルなサイトツアーを実装できる、というスクリプトです。 jQuery依存のスクリプトです。Gmailの方はスクショ取り忘れたのでご自身でお確かめ下さい。 上記のようにラインを引いた場所の解説分をオーバーレイで表示する、というもの。 元はこうなってます。ボタンを押すとオーバーレイとライン、テキストが表示される、という仕組み。 <p data-intro="hogehoge" data-position="right">テキストや表示場所はカスタムデータ属性で指定します。 結構いいかもしれない。シンプルで分かりやすいですね。デモとスクリプトは以下よりどうぞ。 Chardin.js
WEBデザインに質感を与えてくれるシンプルなフリーパターン素材15「15+ Free Patterns for your Designs」
背景やエリアなどに敷くパターン素材。無機質なWEBデザインに質感やクオリティをプラスしてくれる非常に便利な素材です。今日紹介するのはシンプルなフリーパターン素材を集めたエントリー「15+ Free Patterns for your Designs」です。 Subtle Light Tile Pattern Vol5 様々な素材のパターンがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Wood Pattern Background シンプルめな木目のパターンがセットになったパターン素材。 Subtle Grunge シンプルなシロ系のグランジ素材。ちょっとだけ質感を持たせたいときにおすすめです。 Lined paper ノートの罫線を表現できるパターン素材。コンテンツエリアに利用しても面白いかもしれません。 上記の他にも様
musubime™ ｜ カワセ タケヒロ
「誰か」と「誰か」、 「誰か」と「何か」、 「何か」と「何か」。 それらを結びつけ、人や環境にとって良い変化をもたらしたり、 良い方向へ導いたりすることは、デザインに求められる重要な 役割のひとつです。 優れた道具と、それを使いたい誰かを結びつけたり、 技術を持った誰かと、それを求める誰かをつないだり、 暮らしに根付いた文化の新しい形を見つけたり。 そうした流れをつなぐための結び目として、 商業／公共問わず、日々デザインに取り組んでいます。 そして、こうしたグラフィックデザインという作業では、 一般的なセオリーだけではなく、認知行動科学や心理学、 神経内科学など、体系的な裏打ちに基づいた視覚設計が 求められると考えています。 また、事業の立ち上げから関わる機会が多いため、 グラフィックデザイン以外のご相談も多く頂いています。 例えば、とある病院では、ＣＩ計画だけでなく、 問診からカルテ保管
BRnet Web Paradise - DTPデザイナーのためのWebデザイン講座
Vol.1 Webページのサイズについて考える ピクセルをミリメートルに換算する Webデザインにおいてサイズというのは悩ましい問題である。特にDTPデザインに慣れた人にとっては、A4とかB4という紙のサイズに相当する概念がないので、まず「いったいどれくらいの大きさで作ったらよいのか」と戸惑うことが多いようだ。それでなくても、Webページのサイズにはモニタの解像度やらブラウザのバージョンやらいろいろな問題がからんでおりことのほかややこしい。Webmonkeyにも「ブラウザをサイズの面から評価する」というコラムがあるくらいだから、昔からWebデザイナーはサイズという問題に頭を悩ませてきたことがわかる。しかし、ここではこの問題をそれほど厳密には取り扱わず、ごくアバウトに考察していきたいと思う。 さて、DTP系のデザイナーがWebページのサイズを決める時、まず留意しておかなければならないのはWe
必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
digitalskill.jp
Buy this domain. digitalskill.jp 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
これは快適！Mac OS X上でWinのIE6/7/8/9/10など、さまざまなブラウザの確認ができるアプリ -Sauce
Macでウェブ制作に携わる人全員に伝えたい、Windows, Linux, Mac OS Xのさまざまなブラウザでの表示確認ができる無料のMac OS Xアプリを紹介します。 Boot CampやParallelsなどは必要なく動作します。 Sauce -App Store Sauce for Mac -Website Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。
ブレないワイヤーフレームを作るコツ
すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか 作ることで何を達成させたいのかを明確にします 制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります 誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります 誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特
ワイヤーフレームをつくる時に押さえておきたいポイント
どのページをつくるか？ まずトップページ。 体裁が変わるようであれば下層ページも作ります。 また、システムが入るプロジェクトでは画面遷移図としてつくることもあります。 結局のところプロジェクトによります。 競合他者調査 競合他者がどのようなサイト設計を行ってるか参考にします。 他サイトの設計は試行錯誤の結果辿り着いた設計とも言えます。 全く同じ設計にしてしまうのは問題がありますが、 「何故そのような設計にしたか？」を考える事でワイヤーフレームをつくる時の参考になります。 例えば賃貸のサイトではトップの目立つ場所に検索メニューがあります。 賃貸サイトでユーザーが一番求めてるのは賃貸検索ではないか、と考察できます。 （これは誰でも分かる例ですが…） また、ユーザーは過去の体験から次のアクションを予想します。 過去に賃貸サイトを利用した方なら、賃貸サイトで地図を見れば「地域から賃貸を探す」を連想
ワイヤーフレームでWebサイト制作を進める時の注意点
受託案件を何件もやっていると、お客さんによってはパワポで作ったワイヤーフレームを嫌がるお客さんもいらっしゃいます。 作り方にも拠ると思うのですが、四角とか丸で作られたレイアウトだけを見てもいまいちイメージ付かないし、実際にデザインされた際にどうなるのか見ないと判断付かないというのがもっぱらのご意見です。 作る側にとってみると、サイト作っちゃってからあれこれ直されても困っちゃうので念には念を入れて確認して制作を進めていくわけですが、我々業界の人間が当たり前に思っている進め方が、どんなお客さんにも通じるかというとそうではありません。 ワイヤーフレームは非常に重要なもので、作っちゃってから直すというと、頼んだ方も作った方もお互い不幸になってしまいます。 Web制作を何度も担当したことのあるお客さんなどであれば、スムーズかも知れませんが、必ずしもそうではありません。 それでも避けられない工程ではあ
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい！！コードを見せるならこれがよさそうですね！ さて、かっこいいGoogle Prettifyですが、こ
CSSだけで背景をフルスクリーンYouTubeにする
背景にYouTubeを設置するとインパクトあるサイトが簡単に作成できます。 YouTube動画は自動再生になってますのでサイトが表示したら動画が自動で再生されます。又記事をスクロールしても動画は移動されないので常に動画が背景になります。 背景にYouTubeを設置する方法 背景にYouTubeを設置する方法はgoogleなどで検索するとjQueryプラグインなどを使った方法とか色々あるみたいですが、ここではjQueryプラグインは使わずに 単純にスタイルシートだけで設置する方法を紹介します。 まずはYouTubeに行き設置したい動画を探します。 設置したい動画のアドレスの所に動画のIDがあるのでそれをコピーしてメモ帳などに貼り付けて置いてください。 下記のコードをコピーしてbodyタグのすぐ下に貼り付けてください。 <iframe style="z-index: -1;min-width:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Turn emails into revenue | Mailchimp
フォント無料ダウンロード ｜ Typing Art
http://sanride.com/blog/webdesign/web-5.php
新着記事
https://blog.nagocre.com/web/2011/04/popular_gallery_sites.php
