すごい無料HTMLテンプレート厳選30個まとめ 2014年5月度PhotoshopVIP |『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
クライアントに伝わりやすいように工夫されたワイヤーフレーム用のUI素材 -CRowe
クライアントにワイヤーフレームを見せる時に僕が一番気にかけていたことは、まずこれは最終的なデザインではないこと、そして内容がうまく伝わることです。 まぁ、デザインじゃないのはそのままなのですぐに理解してもらえますが、内容やアイデアをしっかり伝えきるのは難しいですよね。 Wireframe & UI Kit 自分だけやウェブ制作者間でのやり取りであれば、ワイヤーフレームはシンプルなボックスベースのものでも問題ないかもしれませんが、クライアントにはある程度ビジュアルを備えたものでアプローチするというのがこの素材のコンセプトです。 正確に理解してもらえることで、結果的にプロジェクトの進行にも役立つでしょう。 素材のコンセプト ワイヤーフレームの素材はさまざまなUIエレメントが揃っており、フォーマットは.epsでダウンロードできます。 利用にあたっては個人でも商用でも無料とのことです、詳しくはダウ
【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
Toshi Omagari | 身近な書体：Comic Sans
久しぶりの身近な書体シリーズです。今回はComic Sansを採り上げます。 Comic Sansは1994年に作られてWindows 95（のPlusパック）に搭載されて以来、Windowsユーザーにはおなじみのフォントです。特に欧文圏ではそのカジュアルさがウケているようで、様々な場所で使われている書体です。まぁプロからすれば特に良くはない書体ですね。それどころかタイポグラファーやデザイナーの間では忌み嫌われている存在で、これの駆逐をテーマにしたウェブサイトもあるぐらいです。 （ちなみにこのサイトの運営者はカップルであり、共通の趣味、つまりComic Sans排斥で意気投合して結婚したそうです。Comic Sansの作者Vincent Connare氏は「自分の書体のおかげで夫婦が誕生したんならこんなに嬉しいことはない」と言ってます） でも、本当にそこまで徹底的に叩かれるほど悪い書体でし
配色を考えるときに便利なオンラインツール10個集めてみました | WP-E (仮)
最終更新: 2018年4月14日 皆様こんにちは！最近WP-Eメンバーに本名を忘れられているような気がするWP-E HINOTANです。寿司ネタがどこかへ行ってしまいましたね。 さて今回はタイトルの通り、便利な配色ツールを紹介していきたいと思います。 Adobe Kuler まずはAdobeが提供しているAdobe Kulerから。こちらは有名なので知っている方も多いと思います。Adobe KulerはPhotoshopやIllustratorとの連携機能があるので便利です。(Adobe Creative CloudのアカウントIDが必要となります) 「Explore」のページでは、様々なカラーパターンを見ることができ、気に入ったものを登録したり編集したりすることができます。登録したカラーパターンはPhotoshopやIllustratorにも反映されます。 Color Hexa Colo
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
これさえやれば1.X倍!?実際に効果が出たEFOオススメ施策ベスト10 | エフトラEFOブログ
EFOは、実際に施策を実行し、改善を繰り返すことが重要です。 当社でも、運営メディアのフォームで常に効果分析と改善を繰り返しています。 以前発表したスライドの中でもお伝えしたのですが、 今回は、当社運営メディアや当社EFOツール「エフトラEFO」をご導入いただいた企業様のフォームで実際に効果のあった施策を、その改善率とともにランキング形式でご紹介したいと思います。 まずは10位から6位のご紹介 それではさっそく、紹介していきます！ 10～6位目次 10位 住所自動入力 9位 スマートフォンに適した入力支援 8位 ガイド表示 7位 初期文言表示 6位 リアルタイムアラート 10位 住所自動入力 住所自動入力とは、郵便番号を入れると住所が自動で入る機能のことです。 郵便番号で住所を入力してくれるタイプのフォームはたくさんありますが、郵便番号入力後、検索ボタンなどを押下する必要なものがほと
ハイクオリティかつ無料のテーマ配布サイトBootstrap Zeroが凄すぎる！ - ku-sukeのブログ
無料なのにこのクオリティヤバイ！！ Bootstrap Zeroはその名の通り、Bootstrapをベースにデザインされた美しいテーマが無料で配布されているサイトです。 これまでもStart BootstrapとかBootswatchとか無料のサイトが合ったのですが、無料だけあって有料のテーマと比べるとちょっとベーシック感が否めない状況でした。 ところがこのBootstrap Zeroはかなりクオリティが高いテンプレートが多いです。自分でデザインする人のためのStarterから、そのまま使えるデザイン済みのThemes、さらにFacebook風やGoogle+風、Android風などもあってかなりのクオリティっぷり！ それではいくつか御覧ください。 Starter 本家のexampleにひと手間加えた感じです。 Themes こちらは気に入ったものを幾つか Admin 管理画面で使える！！
デザインする上で大切にしていること - デザイナーのイラストノート
デザインしてますか？spicagraphです。ふだんツールに関する記事を書いたり、Twitterでつぶやいたりしていると「こいつ見た目のことばっかりやな」と思われそうで、めずらしくデザインするとき大切にしていることについて書きます。わたしの仕事は主にEC、LP、プロモーション、コーポレートサイトなので、UI/UXみたいなかっこいい話でないことは前置きしておきます（でもだいじなおしごとだよ！） デザインは誰のため？ 大前提として、わたしは誰に向かってデザインしているのか。 わたしはフリーランスで仕事をしているため「お客さん」がたくさんいます。仕事をくれた制作会社のディレクターさん、クライアント、ユーザーです。webサイトの「お客さん」はユーザーですが、ユーザーだけがいいと思うものだけが良いデザインだとは思いません。 webサイトは更新されていくものです、多くの場合はクライアントによって。とい
昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 | 福岡 ホームページ制作のブレンドデザイン
2014年03月07日 日々思うこと 昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 Tweet ホームページ制作に関する技術も年々進んでいて、昔は画像を使わないと実現できなかったものも、今は使わずにできるようになったものが色々とあります。CSSという文字や背景の色、レイアウトなどを指示するファイルをホームページ制作に使用しますが、追加機能が加えられたCSS3を使うことで画像の代わりに再現できるようになりました。 画像を使わなくて済むと、画像よりもファイルサイズが小さくて済むので、ホームページの読み込みが速くなったり、編集がしやすくなったり、画像を作る手間が省けたりと利点が色々あります。具体的に何が変わったのかをご紹介しておきます。 1.グラデーション 昔は背景にグラデーションを使いたい、といった時はグラデーションの画像を用意していました。今はCSS3でグラデーション
iPhoneでウェブページをスクロールキャプチャできるアプリ7選
iPhoneには電源キー＋ホームボタンの同時押しでスクリーンキャプチャを撮る機能が標準で備わっている。しかしこれは表示中の内容をそのまま保存する機能であり、ウェブページの上から下までを1枚の画像として保存するといったことはできない。 これを可能にするのが、スクロールキャプチャに対応したアプリだ。どれだけ上下に長いページでも、1枚にまとまった画像として保存できるので、ページの見た目そのままに保存しておきたい場合に活用できる。 今回は、こうしたスクロールキャプチャに対応したアプリ7本を紹介する。これらソフトは一見するとできることは同じに見えるが、実際には使い方や機能が大きく異なっており、またサイトとの相性の差も激しい。以下を参考に、実際に試してみてだめなら別のアプリを試すといった具合に、その場その場で使えるアプリを見極めてほしい。 無料版ながら広告なし、表示が日本語の「RollPaper」 「
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
デザイン効率大幅アップ！Photoshopとスマホの画面がリアルタイムに同期される神アプリ『Skala Preview』
世の中にはこんなに便利なアプリがあったのかと驚きを隠せない霙(@xxmiz0rexx)です。なぜ今まで知らなかったのか！！なんて非効率な日常を送っていたのか！！悔やんでも悔やみきれないです本当に。。 というわけで、今日は存在を知って以来 毎日使ってしまっている超絶神アプリをご紹介させて頂きます:) スマートフォンサイトやアプリデザインに最適なのでマカーなあなたは是非チェックしてみてください！！ 『Skala Preview』とは Photoshopで開いているキャンバスをスマートフォンでリアルタイムプレビュー出来るアプリです！ 今までスマートフォン向けのデザインをする時は、Dropboxにpngを保存し、同期させ、実機で確認していた私。 同期にいちいち時間がかかり かなりストレスだったので、このアプリを知って大歓喜なのでございます♡ 公式サイト：Skala Preview, a Mac a
背景画像のフリー素材サイト10選！デザインで悩んだときに役立ちます | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
1. Subtle Patternsオススメ https://www.toptal.com/designers/subtlepatterns/ 一番よく利用してます。商用利用可の、シンプルで使いやすいシームレスの画像がたくさんあります。 2. Background Labs http://backgroundlabs.com/ 色・タグから検索できます。花柄やイラストがはいった、カラフルで派手なパターンの画像やイラストが多いです。 3. pattern cooler https://www.patterncooler.com/ 選んだデザインの柄の大きさや色をカスタマイズできます。派手派手なデザインがほとんどなので使いどころは難しかもしれません。 4. TextureKing https://www.textureking.com/ テクスチャ画像をお探しのときはこちら。木目・コンクリート
【保存版】Webエンジニアが見るべきテックブログ一覧
皆さんはどのような方法で最新の技術や、コードのTipsを収集していますか？ はてなブックマークやTwitter, GitHubなど様々あると思います。 私はテックブログを使った情報収集をしています。今回はエンジニアが見るべきおすすめのテックブログをいっきにご紹介します。 テックブログとは？ ご存知の方も多いと思いますが、テックブログとはWEBサービスやゲーム等を提供している企業が、自社で使っている技術や開発手法を紹介するブログです。デベロッパーブログとも呼ばれます。 エンジニアが持ち回りで書くことが多いので、そこで働いている人のこともわかっちゃいます。 普段使っているサービスがどのような言語でできていて、どのようなフレームワークを使っているか、どんなツールを利用して開発しているのかが載っているのでとても刺激的な内容ばかりです。 転職、新卒の会社選びにも役立つ!? 転職する際に気になるどんな
[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブのレイアウトやUIデザインの参考になるPinterestのボードのまとめ
今、身につけておきたいデザインのテクニックが論理的にしっかり学べる一冊 -Webクリエイティブの新しい考え方