動的に背景イメージをジェネレートすることが出来る「GeoPattern」:phpspot開発日誌
GeoPattern 動的に背景イメージをジェネレートすることが出来る「GeoPattern」 SVGを使って綺麗なパターンを動的に背景に設定できるあたりが特徴。ユーザが超簡単に好きな背景イメージを文字から作れるというところで、どこかで使えそうなライブラリですね 関連エントリ HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 背景画像をマウス位置と連動して遠近感を出せるjQueryプラグイン「jQuery Interactive BG」 3Dのクールな線形アニメーションをブロックの背景にするjs 背景に複数種類のビジュアルエフェクトを設定できるjQueryプラグイン「quietflow.js」 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」
デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ
Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ
FLAT ICON DESIGN -フラットアイコンデザイン- | WEBデザインやDTPですぐ使えるフラットアイコン素材がフリー（無料）ダウンロードできるサイト
フラットデザインに最適なフラットアイコン素材がフリー（無料）でダウンロードできる「FLAT ICON DESIGN」。 WEBデザインやDTP他、PPTなどでもすぐに使える商用利用可能なアイコン素材。利用規約はこちら ファイルのフラットデザインアイコン ノートのアイコン素材 あざらしのフラットアイコン 博士のフラットアイコン素材 はさみのフラットデザインアイコン ハンマー（とんかち）のフラットアイコン ドル袋のフラットアイコン素材 無料の暴れ牛のフラットアイコン素材 スペースシャトルのフラットデザインアイコン ギリシャのパルテノン神殿風のフラットアイコン 目玉のアイコン素材 にわとりのフラットアイコン素材 計算機のフラットアイコン素材 その2 コーヒーカップのフラットアイコン素材 バッファローのフラットアイコン 乳牛のフラットアイコン 海外の大学帽子のフラットアイコン おさるさんのフラット
Private Presentation
Private content!This content has been marked as private by the uploader.
Web・アプリ開発に使える無料のワイヤーフレームツールまとめ
Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい！という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ＆ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
長いデザインを印刷する｜Print1
縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツールです。※2015.11.10 分割表示されないエラーに対処しました 使い方 画面の赤い点線で囲われたエリア部分に画像ファイルをドラッグ＆ドロップすると、画像の長さを計算して自動的に折り返すように複製して配置されます。 スライダーまたは数値を入力して画像の幅を調整、また画像の位置を個別にドラッグで動かして調整してください。 画面左下の印刷ボタン、またはブラウザのメニューから印刷を行ってください。 画面左下の×ボタンはページをリロードして表示をクリアします。その際、画像幅の設定値は保存されます。 対象ブラウザ Google Chrome 最新版 対応画像形式 jpg,gif,png,svg 紹介記事 WebNAUT
エディトリアルデザインから盗め！女性誌に使われているデザインを見てみた｜アクトゼロ｜SMMやSEMを中心としたデジタルマーケティング会社
こんにちは。年末ですね。クリスマス、忘年会、年越し、お正月と忙しい時期でしょうか。お仕事もラストスパート頑張りましょう。 最近ランディングページでも、フラットなデザインだったりわりとシンプルなデザインを作ることが多くなってきている気がします。昔のようにごりごりに装飾を使うというよりも、“今っぽい”シンプルおしゃれなものを作りたいですよね。そこで参考になりそうなものが、雑誌のデザイン(エディトリアルデザイン)です。紙とWebなのでそのまま真似るのは難しいですが、ちょっとしたあしらいなら参考にできそう！今日はそんなあしらいを紹介します。 版ズレ風文字 カンタンだけど結構おしゃれに見える、そんなあしらいです。基本的には濃いフチに薄い色をズラすのが良いかと思います。見出しに使えそう？ 鉤括弧 鉤括弧といっても普通の「かぎかっこ」ではなく、細めに大きめに、テキスト全体を囲うように使うのがポイント。こ
ノンデザイナーでもできる！写真を使ったイケてるメイン画像の作り方 - CAMPHOR- Tech Blog
こんにちは、あんみつ（@murata_atsumi）です。 この記事はCAMPHOR- Advent Calendar 2014の20日目の記事です。 私ブログが超苦手で普段からあんまり書かないから、何書こうか迷ったのですが、 一応CAMPHOR-には主にデザインの部分で関わることが多いので、 デザインのことを書こうと思います！ はじめに エンジニアの皆さん、そしてそうじゃない皆さんも、たまに『メイン画像』を作らなければいけないときがあるんじゃないでしょうか。 メイン画像というのは、こういうのとか （引用：https://www.cyberagent.co.jp/recruit/fresh/internship/ ） （引用：http://tokyometro10th.jp/future/opendata/ ） こういうのとかですね。 または、Facebookページのカバー画像や、OGP用
#13 フロントエンド制作に華を！ 面白いWebAPI 7選 - KAYAC Engineers' Blog
こんにちは。 カヤックに新卒で入社し、フロントエンドエンジニアとして スロット制作を中心とした活動を続けている田島です。 どうぞお手柔らかによろしくお願いします。 さてさて、Webのフロントエンドエンジニアの場合、 何か作りたいアイデアを思いついてから世に公開するまでのスピードが コピーライターに次いで早いです。 また、リッチなコンテンツや大量のコンテンツを扱って何かしようというときには WebAPIをうまく活用すれば、自前でデータベースを作らずとも ササッと作って公開することもできます。 今回は、そうしたフロントエンド制作を豊かにするWebAPIの中から特に 面白いと思うものを7つ選び、実例を交えて紹介していきたいと思います。 1. MediaWiki API http://ja.wikipedia.org/w/api.php Wikipediaの情報を取得できるAPIです。 このAPI
黄金比とは？基礎・書き方とデザインに活用するときの5つのポイント | LISKUL
黄金比とは、「1:1.618」という比率のことです。 黄金比は、物事のバランスと調和を最適化し、視覚的魅力を引き出すと言われています。 自然界では、貝殻の螺旋形状などがこの比率で形成されており、モナリザなどの美術品や、エッフェル塔などの建造物にも活用されています。 しかし、具体的にはどのようなものなのか、どのようにデザインに取り入れればよいのかわからないという方も多いのではないでしょうか。 そこで本記事では、黄金比の基礎や、歴史、計算方法、身の回りにある例、具体的な活用方法、などの情報を一挙にご紹介します。 黄金比を活用して魅力的なデザインを作成したい方は、ぜひご一読ください。 黄金比とは、1：1.618という比率のこと 黄金比とは、「1：1.618」という比率のことで、数学、美術、自然の中で頻繁に見受けられる特別な比です。 この比率は「黄金分割」とも呼ばれ、ある長さを二分割した時、全体と
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
デザインのためのデザイン
1. DESIGNING FOR DESIGN デザインのためのデザイン Masayuki Uetani / 2014.11.11 / #nanapi_study
【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。
【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。2014.10.13 WEBデザイナーは技術はもちろん、手持ちのリソース（情報など）が多いほど有益なデザインを完成させることができます。 しかし海外の素材サイトは、ウイルスリスクの懸念や利用規約も英語で理解できなかったり曖昧だったりでちょっと怖いイメージがあります。特に商用で利用したい場合にはしっかりと利用規約を確認することができる日本で運営しているサイトのが安心ですね。 ここでは本当に使えるWEBデザイナーご用達の商用フリーの素材サイトをまとめました、デザイナーに限らず趣味でサイトを運用している方にも保存版の8サイトをご紹介します。 PAKUTASO5000枚近く（2015/10時点）の写真素材を保有するパクタソは管理者の方が手間を惜しまず写真を1枚1枚選別し、さらにノイズ処理や補正、トリミングなどを行
いまWebサイトで流行ってる色 / Maka-Veli .com
CATK http://catk.de/ #513baa #6445e0 Frank Chimero http://www.frankchimero.com/ #00deb7 #5fe2ff #6144b0 #ff4a5d #fff3cd Prospek https://prospek.ca/ #46b085 Mixd http://www.mixd.co.uk/ #1c4bbe Flavor http://www.madebyflavor.com/ #f84c74 #9f6cc8 #4d9ff5 #4bdcb5 Build in Amsterdam http://www.buildinamsterdam.com/ #79a596 #222327 Socialist http://www.sociali.st/ #f53e2e #0b0b0b Square https://s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Samsung
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
sp-web.jp
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
