写真が劇的に変わる！重ねるだけの無料オーバーレイテクスチャ素材750枚まとめ
この記事では、写真加工で重ねて使える無料オーバーレイテクスチャ素材を詳しい使い方と一緒にまとめてご紹介します。 オーバーレイテクスチャ素材は、ドラッグ&ドロップで手軽に利用でき、さまざまなシーンに対応する素材が幅広く揃います。これらの素材を利用すれば、写真加工、編集プロセスをよりクリエティブに、効率的に行うことができるようになります。 オーバーレイテクスチャとは？ オーバーレイテクスチャ（英: Overlay Texture）は、写真の上に重ねて利用できる画像ファイルです。多くの場合、PNGファイルで収録されているので、Photoshopにドラッグ＆ドロップで手軽に利用できる点も魅力です。 あとはお好みでレイヤーの描画モードや不透明度を調整することで、異なるエフェクトを実現できます。では、実際にどのように利用するのか詳しく見ていきましょう。 オーバーレイテクスチャの使い方 オーバーレイテク
[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン｜金 成奎
[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン ウェブデザイナーが作った成果物に対して、満足はしていないのだけどうまく言語化できなくてどうやって指示したらいいか分からない、あるいはクライアントからのフィードバックをどう咀嚼して伝えていいか分からない、結果的にデザイナーを上手くディレクションできていない.......。そんなお悩みをもったウェブディレクターいませんか？ ここでは実際のデザインを見た時に感じること・あるいはクライアントが指摘しがちなことについての「あるある」を、15の事例に集約してまとめてみました。デザイナーとコミュニケーションしてデザインをブラッシュアップする上での、ある種のアートディレクションの手引きとして活用してもらえればと思います。 1.「野暮ったい」と感じたら・言われたら。 「野暮ったい」とは
![[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン｜金 成奎](https://cdn-ak-scissors.b.st-hatena.com/image/square/0aa50796295af9d9e533b4f2f4683522dbc45cd4/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F13031716%2Frectangle_large_type_2_0cfda3162d1aa8bb9571cecf5ec1f1e0.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
【CSS】CSSだけで作るドロップダウンメニュー（多階層）
【CSS】CSSだけで作るドロップダウンメニュー（多階層） 公開日:2019/06/13 /最終更新日:2019/06/30 CSS Technique 今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードになります。 「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。細かく分けて解説入れながらやっていきますので、「うんちくなんいかいらない！」という方は、最後までジャンプしてください。最後に全てのコードを記載します。 親階層 まずは親階層です。 HTML <ul class="gnav"> <li><a href="">Menu1</a></li> <li><a href="">Menu2</a></li> <li><a href="">Menu3</a
中途採用のためのサイト戦略と13の成功条件 | knowledge / baigie
私たちは、BtoBサイトを得意とするweb制作会社ですが、実は採用サイトの実績も豊富です。BtoBの顧客化プロセスと採用プロセスには共通点があり、BtoBサイトの検討プロセスを転用し、戦略的な採用サイトの制作も行っています。 このように採用サイトの実績を積み重ねる中で、業界・業種・職種に関わらず共通する傾向も見えてきました。共通のパターンを知ると、世の採用サイトの間違いにも気が付くようになりました。 この記事では特に中途採用にフォーカスし、調査フェーズで私たちが行っているアンケートの集計結果なども交えながら、成功する中途採用と採用サイトの条件をまとめました。 条件1：自社の採用サイトをしっかり作る「自社で採用サイトを持つ必要ってあるの？」という声が出ることは、おかしなことではありません。 今は転職サイトも充実していますし、優秀な転職エージェントも数多く存在します。どこかに求人情報をアップし
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
【コピペOK】jQueryでシンプルなハンバーガーメニューを作る方法 | 田舎フリーエンジニアのワークログ
Last-Modified: 2019/02/26 【コピペOK】jQueryでシンプルなハンバーガーメニューを作る方法 javascript ボタンを押すとナビメニューがアニメーション表示されるシンプルなハンバーガーメニューを作成します。レスポンシブ化するときにおすすめです。 デモ htmlでメニュー部分を作成 CSSでスタイリング jQueryで動きをつける 実際に動きを出すのはCSS部分です。jQueryはクラスを付与するために使います。 スポンサードサーチ HTML <!-- ナビメニュー部分 --> <nav class="NavMenu"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4<
detailsタグでクリックで開閉するFAQコンテンツ
Result detailsタグでFAQコンテンツっぽいやつを作るサンプルです JSも使わずCSSの力業も不要なのでコードもスッキリ見やすいですね 例によってIEでは使えないHTMLタグですが、便利には違いないですね summaryにoutline: none;を付けないとクリック時にボーダーが表示されてしまいます。 csssummary { display: block; outline: none; } summary:before {/*矢印アイコンを付与*/ display: inline-block; content: "›"; margin-right: 0.5rem; font-weight: bold; font-size: 1rem; transition: all 300ms ease; } /*答え部分が開いている場合の処理*/ details[open] summa
ホームページのパーツ作成【無料】
ブラウザ操作だけで、文字や画像のデザインや動きを自動生成することが出来ます。 HTML,JavaScript,CSS(STYLE)が自動で作成されますので、コピー＆ペーストだけでホームページに反映することが出来ます。 JavaScriptは「jquery」を使用していませんので、「jquery」が利用できない環境でも利用可能です。 文字のデザインと動きを自動作成
CSSで作る！吹き出しデザインのサンプル19選
今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。 レスポンシブ対応 以下で紹介する吹き出しデザインは（円形のものを除き）、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。 使い方（初心者向け） CSSが反映されないときはこちら シンプルな四角い吹き出し4つ 最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e9edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。 ちなみに下から伸びる三角形は疑似要素（before）で表現しています。興味のある方は下の記事に目を通してみてくださ
「言葉の置き換え」だけで転換率アップ！商品の魅力を高める描写パターン集 | コマースデザイン
転換率でお悩みの皆さん、「何もない日」の転換率はガタ落ちで、予算達成はセールの日次第なんて状態、身に覚えはありませんか？気が気じゃないですよね。。 そこで今回は、転換率の応急処置策を考えてみました。テーマは『商品説明』。ページを頑張って作り込まなくても、言葉選びを見直すだけでできる対策があるんです。 簡単・時短・無料と三拍子揃ってますので、ぜひ日々の転換率対策にご活用ください。 ※現場で使いやすいように、印刷用資料(おまけ付き！)も用意してみました。こちらからどうぞ↓ はじめに 最近の転換率事情 現在の楽天市場では「スーパーSALE」や「お買い物マラソン」「5と0の付く日」などセールイベントが状態化してきていますよね。お客さんもセール慣れしたのか、オトクに買い物できる時期を狙って決済する動きが強まっています。 以下は、あるお店の転換率の日別推移です 皆さんのお店でも、このように5と0の付く
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
タグクラウドをCSSのみでお洒落なデザインにする方法 | ツクログ
タグクラウドを、画像を使わずにCSSのみで、お洒落なデザインにする方法です。 DEMO HTML <h2>Tag Cloud</h2> <ul class="tag"> <li>HTML</li> <li>CSS</li> <li>jQuery</li> <li>WordPress</li> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> <li>PHP</li> <li>Photoshop</li> <li>Illustrator</li> </ul> タグクラウドは、リストで構成されています。 h2 { color: #777; } .tag { color: #fff; font-family: 'Raleway', sans-serif; padding: 10px; width: 300px; } .tag li { backgr
フラットでレスポンシブな最新LPテンプレート15選
新しいWebサービスの公開やアプリケーションの紹介ページになくてはならないのがLP(ランディングページ)。通常はデザイナーさんに頼んで作ってもらうことになると思うのですが、それだとちょっと値段が・・・という方にぴったりなのが、ランディングページのテンプレートを利用することです。 テンプレートなので最初からすでにコーディングやデザインが施されており、SEO対策までされているので１から作る必要がありません（その代わり僕の仕事がなくなりますが・・・）。しかもお値段たったの１０ドル！！！ この記事では非常にクオリティの高い最新のランディングページテンプレートを紹介します。フラットでレスポンシブレイアウトが施されているので先進的なサービスやアプリにぴったりです。 フラット＆レスポンシブLPテンプレート Kane – Responsive Bootstrap 3 App Landing Page Ci
WordPressの投稿フォーマットを活用してみる | helog - スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。
スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。 WordPress 3.1から投稿フォーマットという機能が追加されているのですが、これまで活用できていなかったので、ここで少し勉強したいと思います。 投稿フォーマットでは、投稿内容を各フォーマットに合わせて、デザイン・レイアウトを切り替えることができます。 例えば、記事として投稿する場合でも、通常の投稿とは別で、リンク集や画像ギャラリーとしてレイアウトを分けたい場合に役に立ちます。 functions.phpでフォーマットを有効にしてみる フォーマット機能を有効にするためには、functions.phpで以下を追加するだけです。 add_theme_support('post-formats', array( 'aside', 'ima
ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略（石橋秀仁）
［編注：なぜこのような煽りタイトルをつけてしまったのか。若気の至り。（石橋、2020年）］ 本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必
Webアプリをあっという間にカッコよく！ BootstrapによるレスポンシブWebレイアウト
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cookpad Design Magazine｜クックパッド公式note｜note
【無料】おしゃれなフライヤー&ポスターデザインテンプレート8選！モックアップのように文字や写真の入れ替えで簡単！【ai,psd,word】
Wordmark
