近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトを、CodePenで公開されている中から紹介します。 そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。 紹介しているものはホバーやクリック時のエフェクトが主になるので確認はPC推奨です。 CSS-only super tilt button よく見るクリックすると押し込まれるような見た目になるボタンにさらに手を加えたタイプで、クリックした位置によって押し込まれる部分が変わります。 実装はすべてCSSでされており、具体的にはまずボタンの中に複数のspan要素を配置し、それぞれクリックされた際にテキストや背景の部分をCSSのtran

選択範囲をシェイプに変換するスクリプトを作成しました。 更新:2017.7.10 シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。 「単位:px」でご利用ください。 スクリプトの利用手順について �(1) ダウンロードしたzipファイルを解凍して「Dearps_選択範囲をシェイプに変換.jsx」をPhotoshopのスクリプトフォルダに移動します。 Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts (2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成します。 (3) [ファイル] / [スクリプト]から「Dearps_選択範囲をシェイプに変換.jsx」を選択する

1.色々な媒体資料を見て研究する 「どんな媒体資料にしたいか」というイメージが固まっていないと、いざ作り始める時につまづいてしまいますよね。そのため、まず私は色々なメディアの媒体資料を見て研究することからスタートしました。 「どんな形式で作られているのか？」「自社メディアをどんな言葉で表現しているのか？」「アクセス数はどれくらいか？」「広告メニューや料金の見せ方は？」など様々な疑問を頭に浮かべながら、とにかくたくさんの媒体資料を見まくりました。 色々なメディアの媒体資料を見ることで、それぞれの事例が学べるだけでなく、自社メディアとの違いも浮き彫りになるため、自然とイメージが湧いてきますよ！ 媒体資料まとめ記事 研究する過程で発見した素敵なデザインの媒体資料や、自分なりに参考になったポイントをまとめた記事を書きましたので、こちらも併せて読んでみてください！ また、以下の記事も非常に参考になり

どうもですはやちです( ˇωˇ ) 今回はよく見かける複数行の文末に「…」をつける対応をcssで実装する方法と、それを管理しやすいようにMixin化をいたしました！ 実装方法 タイトルと文章がセットになったものを用意します。 ひとつのセクションのhtmlは、こんな感じです( ˇωˇ)☝ <section> <h2>Title1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conse

テキストとアイコンを横並びさせたボタン、カテゴリのテキストを配置したラベル、ラベルが長いフォームなど、これらのテキストが長いとレイアウトが崩れてしまうことがあります。 レイアウトが崩れてしまう予期せぬコンテンツに対応するためのスタイルシートのテクニックを紹介します。 Handling Long and Unexpected Content in CSS イラスト: Girls Design Materials 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 左右どちらかにアイコンが配置されたボタン 02. ラベルに重なってしまうフォームのボタン 03. テキストが長くてスペースに収まらない場合 04. リンクが長くてはみ出してしまう場合 05. タグのテキストが長くてはみ出してしまう場合 06. 両端揃えのテキストが長い

どうもですよ、はやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾ 今回もSVGネタなのですが、グラフをカンタンに描画できるライブラリをご紹介いたします( ˘ω˘)☞三☞ｼｭｯｼｭｯ 導入方法 タスクランナーでのインストールはこちら。 npm install chartist –save 実装方法 実装方法ご紹介します٩( ᐛ )و ↓表示する場所は、ささっとdivで用意します( ˇωˇ)☝ <div class="wrapper"> <div class="chart"></div> <div class="chart2"></div> </div> ↓基本的な実装はこんな感じ。 //ドーナツ型のグラフ let chartBig = new Chartist.Pie('.chart', { series: [91, 3, 6],　//数値の設定 labels: ['BigChart',' ','

視覚的要素の中で一番重要だと言っても過言ではない色。配色バランスを決めるのはなかなか難しく、それが2色、3色と増えることで難しさは増していくのではないでしょうか。そんな時に活用したい、便利で簡単なカラーパレット作成サイト「Color Supply」を今回は紹介したいと思います。 円形の色相環図をぐるぐると選択するだけで、バランスの良い配色パターンを生成できる、とても便利なwebツールとなっています。 詳しくは以下 色相環図をクリックしたまま動かしていくと、周囲のオブジェクトの色が変化し、それによって色を確認することができます。また色相環の横にはカラーバーが複配置されており、こちらもクリックすると、色相環と同じ色パターンでトーン替えをした場合のバリエーション確認も可能。類似色、補色、トライアングル関係の配色など、5種の色の組み合わせから選ぶことができ、さらにカラーコードなども取得できるので、

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

ルーン文字が大好き！ 魔法陣が大好物な人には激しくオススメです！ 古代ゲルマン人が使用していたルーン文字を現代風にデザインした美しいフリーフォントを紹介します。 フォントにはおまけとして、そのルーン文字を使用して、精密に描かれた魔法陣が含まれています。そのクオリティは、おまけレベルではありません！ しかも、AI, SVGのベクター完備！ ルーン文字フォントと魔法陣のセット 2020/2/7 追記: 同作者による魔法陣のジェネレーターがリリースされました！ 商用利用無料！クリックするだけで、魔法陣を無限に組み合わせて生成できるジェネレーター -daisy bell ダウンロードファイルには、以下が含まれています。 ルーン文字: 8書体 魔法陣: 90ファイル ダウンロードできるファイルのいくつかを紹介します。

React.jsの理屈は後回し。とりあえずコードを書いてみたい。jQueryが古いと言われているのらしいので「こう書けばこうなる」くらいをやってみたい。 React.jsが来るらしい jQueryで表面のベーシックなことだけしていたタイプの私には、React.jsは大変ハードルが高いです。検索して出てくる記事をいくつか読んでみたものの、そもそもの考え方から変えていかなければならないんだなと感じました。 しかし、時間は待ってくれないので、もうHTMLにソースを書いてみようと思います。強引にやっていきましょう。 ※ちなみにこのReact.jsですが、HTML5が使えるブラウザ環境である必要があります。 jsなのでまずはライブラリを読み込む さてやっていきましょう。ここはjQueryと同じですね。ライブラリを読み込みます。ローカルに落として読み込んでもOK。

うぬらこんばんは！ カリカチュアの帝王、田中ラオウでございます。 今回は、日本の超売れっ子イラストレーターのHama-Houseさんの仕事場に潜入します！　このHama-Houseさん、ハッキリ言って売れています。リッチGuyです。絵描きが、イラストを描いて人並み以上の生活をしてるとかマジで意味不明！　これだけ絵では食えないと言われている世の中で、絵で食えてるどころか裕福て。 この前なんて海外旅行に行きくさってましたからね。3ヶ月も。マジかよ。なんなんだよちくしょおぉぉ。絵描きってもっとギリギリな感じちゃうんかい。そもそもHama-Houseてどういう意味やねん。あんたの本名濱口やろ！せめて濱家であれっ！！ みたいな嫉妬が爆発してTanaka-Houseが吹き飛びそうなのでこの怒りを本人にぶつけてMiki-house（※）してきます。 ※子供の洋服って可愛いよね、という意 いざ潜入 人物紹

TOP  >  Design , vector  >  ゆるいタッチが魅力のキュートな手書き風ベクターイラスト素材120＋「Romantic Dreams Free Vectors」 デザインに添えるイラストは、雰囲気を柔らかく華やかにしてくれたりと、何かと役に立つ存在。いざという時に活用できるストックとして持っておくと非常に便利です。そんな中今回ご紹介するのは、120点以上ものイラストがセットになった「Romantic Dreams Free Vectors」です。 ペンようなタッチで描かれた、柔らかい雰囲気のイラストが魅力的な素材セットです。 詳しくは以下 可愛らしい作風のクマを中心とした動物のイラストや、宝石やクリスタルなどの鉱物、装飾に使えそうな文字やハート、花など様々なイラストが収録されています。作例のようなイラストを複数組み合わせて飾り枠を作ったり、パステル調のガーリーなデザイ

日本語のフォントを使って、ロゴやタイトルをデザインする時のアイデアとすぐに役立つデザインのテクニックをAdobeから紹介します。 手持ちのフォントに一手間加えるだけで、素敵なデザインに変わります。 ※記事の掲載にあたり、Adobe広報様に許可を頂いています。 目を引く文字デザインの作成方法: 初級編 目を引く文字デザインの作成方法: 中級編 簡単にできるロゴの作り方 目を引く文字デザインの作成方法: 初級編 初級編では、非常に簡単な作業で、ユーザーの目を引く文字のデザインテクニックが使用されています。もちろん、ここから更にアレンジを加えるのも有りです。

.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

サイトテンプレートからUI設計、アイコン、出来上がったデザインを実際に見せるためのモックアップに至るまで、WEBサイトを制作するにあたって、必要となる材料や要素は数多く存在します。そんな中今回紹介するのは、デザインを進めるにあたって必要不可欠となるツールをフリーでダウンロードできるサイト「UIPIXELS」です。 iPhone 6s Plus Mockups | Free PSDs & Sketch App Resources for Designers – uipixels サイトの構成を決めるテンプレートから細かなパーツまで、制作する中で活躍してくれるであろうアイテムが網羅されているのが、とても魅力的なサイトです。サイトでダウンロードできる素材をいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 24 Flat Mockups Free | Free PSDs &

この記事では、HTMLとCSSで要素を中央配置する方法をパターン別に紹介していきます。縦方向と横方向それぞれの方法を全てまとめます。また「中央寄せできない」というときの対処法もパターン別にまとめておきます（スキップする）。 横センタリング（左右中央寄せ） まずは、横方向に中央寄せする方法を見ていきましょう。 その1：文章を中央揃え 文章を左右中央に揃えたいときは、その文章が含まれる要素、もしくはその親要素に対してtext-align:centerを指定します。

ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。 また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装する方法も併せて紹介します。 ここで紹介しているサンプルで使用しているHTMLは、すべて<a href="#">Lorem ipsum</a>のようなシンプルなa要素を使用した想定になっています。

今回はCSSのコピペで使える引用ボックスデザインのサンプルを30個作ってみました。引用タグ（blockquote）のデザインをサクッと変えることができます。どれも画像は使わず、HTMLとCSSだけで表示することができます。ブログやWebサイト運営者の方は、是非ご利用くださいませ。 使い方 デザインを紹介する前に、使い方を簡単に説明しておきます。 CSSをコピーして貼付け

スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ