いろいろなデザインで活用できる ミニマルデザインフォントまとめ「19 Free And Stylish Minimalistic Fonts For Your Designs」
いろいろなデザインで活用できる ミニマルデザインフォントまとめ「19 Free And Stylish Minimalistic Fonts For Your Designs」 インターネット上で配布されている素材の中でも、活用の幅の広いフリーフォント。特にシンプルで汎用性の効くタイプは1つでも多く持っておきたいものです。今回そんなタイプのミニマルデザインフォントまとめ「19 Free And Stylish Minimalistic Fonts For Your Designs」を紹介したいと思います。 （Simple Ronde Font | dafont.com） いろんなデザインに使用できそうなフォントが19種、ビジュアルイメージと共に公開されています。いくつかピックアップしていみましたので、下記よりご覧ください。 詳しくは以下 ■Gabriele 8008 Typewriter
素早く確実にWEBデザインをするための手順
新人から「どうやってデザインをしていいか、わからない」という声をよく聞きます。 私も新人の頃、他にデザイナーがいなかったので、 どのような手順でデザインすればいいか、わかりませんでした。 また、自分のやり方が正しいのか不安でした。 今までの経験から、ある程度、素早くデザインするための、 私なりのコツはつかめましたので書いてみたいと思います。 一つの例として参考になればと思います。 はじめに 今回は、カンプ用のデザイン、グラフィックとしてデザインの手順です。 まず、私が求められているスキルとして ・スピード ・クオリティの安定感 があります。 クライアントの求めるデザイン傾向として ・わかりやすい ・一般受けする があります。 また、私は奇抜なデザインや、先進的なデザインをするタイプではありませんし、アーティスティックなタイプでもありません。 どちらかと言えば、定番のデザインをきっちりしてい
私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
Webデザインの配色について学ぶときに読んでおきたい14の記事
このブログをみてお分かりのように、私は思い切った色使いがなかなかできません。どうせセンスがないしと諦めても仕方ないし、恐らくセンスがないのではなく勉強していないだけですし、言い訳はせず勉強することにしました。 ということでWebデザインの配色について学べる記事を集めてみました。 基礎的なものから並べてみましたので、順番に読んでいけば色についての知識は深まると思います。「センスがない」という言い訳をして、実は勉強していなかっただけだということに気付く人もいるかも。 色彩センスのいらない配色講座 基本から分かりやすくまとめられているスライドです。サブタイトルの「色は理論的に説明できる」っていうのがなんかかっこいい。 絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】 基本的な内容を親切に分かりやすく説明してくれていますので、これから勉強
日付を便利に操作するためのJavaScriptライブラリ色々 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） JavaScriptには日付を扱う為の “Date” オブジェクトがありますが、正直なところこれはあまり親切ではありません。 そこで、JavaScriptの日付周りで楽をするためのライブラリのメモをここに。 XDate XDate – A Modern JavaScript Date Library Dateをもっと便利にした XDateオブジェクト を実装するライブラリです。 使い方はDateとほとんど変わらず、XDateに引数を渡して初期化して使います。 XDateオブジェクトは、DateにあるsetTimeやgetFullYearなどのメソッドを継承している他、 日付の足し算を行ったり、差分を計算したり等便利なメソッドが沢山生えています。 var d = new XDate(1977, 10, 25); // 1977/1
[書評]「プロになるためのWebデザイン入門講座」 ｜https://wp.yat-net.com/name
「プロになるためのWebデザイン入門講座」を著者の庄崎大祐さん（なつきさん @Stocker_jp ブログ:Stocker.jp）より頂戴しましたので、書評を持ってお礼とさせて頂きます。 本誌の特徴はプロが現場で実際にどう手を動かしているのかを学ぶことができます。 PhotoshopやIllustratorに関する解説にしても、まず使いやすい設定からショートカットを利用した制作、実際に現場で作成するものをサンプルとして作成するなど、プロを目指すなら抑えておきたいポイントを主体として解説されています。 その為、これから本気でプロを目指す人に是非オススメしたい一冊です。 肝心の中身ですが、下記のような構成となっています。 1.Webに求められるデザインって何だろう？ 2.必要なアプリケーションと画像についての基礎知識 3.PhotoshopをWebデザインで効率的に使う方法 4.こんなとき役立
![[書評]「プロになるためのWebデザイン入門講座」 ｜https://wp.yat-net.com/name](https://cdn-ak-scissors.b.st-hatena.com/image/square/1895757402a3fa68dcdef0b236877612dde9328d/height=288;version=1;width=512/https%3A%2F%2Fwp.yat-net.com%2Fwp%2Fwp-content%2Fuploads%2F2013%2F07%2Fprowebbook_00.jpg)
[JS]テキストにSci-Fi styleのかっこいいアニメーションのエフェクトを与えるスクリプト -Text Effects
ランダムな文字を次々に表示し、一つのテキストを生成するSci-Fi styleのアニメーションのエフェクトを与えるjQueryのプラグインを紹介します。 Text Effects Text Effects -GitHub ※上記のアニメーションgifは軽量化のため、間引いてます。実際はもっと多くの文字列が高速に表示されます。 Text Effectsのデモ Text Effectsの使い方 Text Effectsのデモ テキストのエフェクトにはいくつかのバリエーションがあります。 上記のアニメーションgifのようなシンプルなエフェクトをはじめ、複数のテキストを使ってループで表示したり、逆からテキストを生成するリバースなどがあります。 Text Effectsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。
サンプルで学ぶTwitter Bootstrapの使い方：前編 (1/3)
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
CSS3で縫い目風のデザインを作る / ウェブデザインライブラリー
投稿日：2013年7月25日 ソフトウェア：CSS3 このチュートリアルではCSS3で縫い目風のデザインを作る方法について紹介します。 Step1 ： はじめに Step2 ： CSS3 Step3 ： 完成 デザインの世界では、要素をより減らし、効果をより増やすことが重要になります。 要素が多すぎると、ぐちゃぐちゃになってしまいますし、逆に少なすぎると90年代のような古臭い印象を与えてしまいます。 幸せなことに、ウェブデザインには、CSS3という素晴らしい武器があります。 CSS3を使えば、ページやページ内のコンテンツにポップさが加わります。 そして、サイトをごちゃごちゃさせることなく、一部分を際立たせたりきれいに見せることができるようになります。
JavaScriptでLeapMotionアプリを作る方法
こんにちは。クレイの浅海です。 いま話題のLeapMotionとJavascriptを使って、空中でピアノを演奏できるアプリを作りました。 まだLeapMotionを初めて数日なので勘違いしている部分もあるかもしれませんが、JavaScriptでLeapMotion対応アプリをどのように作るのかについて、気づいたことを紹介します。 目次 デモ leap.jsの用意 イベントループ Frameオブジェクト frame.fingers frame.hands frame.gestures circle swipe keyTap screenTap 感想 デモのコード デモ まずは実際に動かしている動画を御覧ください。 空中に手をかざすだけで、ピアノを演奏することができます。 音の再生にはMIDI.jsを使用しています。 ※ 手を3Dで表示している部分は、LeapMotion標準のビジュアライザ
リボンUIの基本をマスターする
Windows 8の「エクスプローラー」「ワードパッド」「ペイント」には、Microsoft Office 2007から採用された「リボンUI」が搭載されている。リボンUIは、従来のツールバーと異なり、コマンドボタンをタブでグループ化し、操作対象に合わせて動的に切り替える新しいコマンドバーである。 Office 2007に採用された当初は、新しいユーザーインタフェースに戸惑う意見も多かったようだが、現在ではマイクロソフトがリリースするアプリケーションの多くが、このリボンUIを搭載するようになってきた。 そこで今回のWindows 8道場は、今後採用するアプリが増えていくであろう「リボンUI」に焦点を当て、Windows 8のエクスプローラーでその基本操作を解説していこうと思う。 エクスプローラーのリボンを表示する まずは、リボンUIがどのようなユーザーインタフェースなのかを確認するため、エ
WordやExcelファイル内の画像を一括して抽出する方法 | ライフハッカー・ジャパン
ワードやエクセル、パワーポイントに挿入されている画像や動画などを一度に抽出したいときは、拡張子を「.zip」に変更してみましょう。まずはファイルを指定しファイル名を変更、拡張子を「.zip」に変更します。できあがったZIPファイルを、ダブルクリックするなどして解凍します。そうすると、挿入されていたコンテンツがフォルダに分かれて展開されます。 たとえば画像ファイルであれば、ワードの場合は［word］＞［media］フォルダに、エクセルファイルは［xl］＞［media］フォルダ、パワーポイントファイルは［ppt］＞［media］フォルダ内にまとめられています。 大量の画像が挿入されたパワーポイントファイルから復元を試みるときなどに便利です。 LPT: You can rename any Office 2007 (or later) file (docx, xlsx, pptx) to .zi
CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS
ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 多層グラデーションな背景を作れる、というもの。用途は限られそうですけど、なかなか素敵な感じ。 こういう背景を色を指定してランダムに作成出来ます。 以下サンプルです。 Sample リロードする度に異なったグラデーションが作られます。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="shards.min.js"></script>本体とプラグインを読み込む・・・のですが、1.9だと動かないっぽい？ $('#foobar').shards( [239,199,222,.
好みのチェックボックスのデザインが簡単に作れる「CSS Checkbox」:phpspot開発日誌
CSS Checkbox | Cross Browser CSS Checkbox Generator | Free Checkbox CSS 好みのチェックボックスのデザインが簡単に作れる「CSS Checkbox」。 豊富なピュアCSSでデザインされたチェックボックスを選んでダウンロードが可能です。 必要なものだけど選んで、HTMLとCSSをコピペで使えるようになっているみたいです。 クロスブラウザかつ、ピュアCSSということでとても使いやすそうです ちょっとオシャレなチェックボックスにしたい、という場合は参考にできそう 画像はこのサービスのサーバを直指定しているようなので、トラフィックの大きなサイトでは予め画像をダウンロードして使うとよいでしょう。 関連エントリ チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
新着記事
さまざまな用途にロイヤリティフリーで使用できるロングシャドウスタイルのファイルタイプ用のアイコン素材 -Web Icon Sets
新着記事