デザイナーの参考になる世界のGoogleマップデザイン20選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 ほっぺたと笑顔は柔らかい方がいい、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 突然ですが皆さん、Googleマップを見たことはありますか？あると思います。 Googleが運営しているだけあって、毎年様々な企画でワクワクを届けてくれる、あの地図のことです。 そこで今回は、クリエイティブなイケてるマップデザインを紹介させていただきます。では、いってみましょう！ マジでイケてるGoogleマップデザイン Miagui Imagevertising http://www.miagui.cc/contact/ Mとレッドカラーがマリオを彷彿させます。 Yvan Rodic http://yvanrodic.com/places WORLD、CONTINENT、COUNTRYの3つの視点でお楽しみください。 aBenção – malhas e tricots criat
Photoshopでジグソーパズル風のデザインを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 今回はお好きな写真をジグソーパズル風にする方法をご紹介したいと思います。 1. ジグソーパズルの型を準備する 今回はこちらの素材を使用させていただきました。 参考：ジグソーパズルイラスト素材01 | イラスト 無料の素材ライブラリー.com ピース1つ1つが選択できるようになっているので、とても使いやすかったです！ 2. DLしたベクターデータをPhotoshopに取り込む まずはじめに、Photoshopで長方形を描きます。 次にIllustratorを開いて、先ほどダウンロードしたパズルのオブジェクトをすべて選択→「コピー」しておきます。 Photoshopに戻って長方形を書いたレイヤーに先ほどIllustratorでコピーしたパズルのデータをペーストします。 その際、「パス」を選択して貼り付けてください。 長方形ツールがパズルの形に型抜きされました
サービス終了のお知らせ
いつも「えんじょいふる」をご利用いただき誠にありがとうございます。 2019年6月10日（月）24時をもちまして、「えんじょいふる」サービスの提供を終了させていただくことになりました。 これまで投稿いただきましたコンテンツを含めた全ての情報につきましては、同サービスの終了をもって消去させていただきました。 ご不便をおかけし申し訳ございませんが、何卒ご理解いただきますようお願い申し上げます。 長らくのご愛顧ありがとうございました。 今後ともジョイフル本田をよろしくお願い申し上げます。
DIY事例とオシャレなインテリアを提案するWEBマガジン【金曜大工】
金曜大工編集部発信のコンテンツ 4,500円で。ニスの剥げたダイニングテーブルを再塗装ダイニングテーブルの再塗装って、プロに頼むと5～8万円かかるらしいです。自分で塗装すれば5千円以下。やるしかないでしょう！ 材木の選び方材料選びは木工で一番難しく、知識が必要なのが実はこれ。加工途中で材料が割れてしまったり、完成した後から板が反ってきたりという失敗が起こるのは、木が生き物で、収縮する材料だから。 【DIYに使いやすい木6】タモについて「タモ」は強さとしなやかさを兼ね備えた、加工性に優れた木材です。 【DIYに使いやすい木5】ファルカタについて軽くて白くて加工が簡単。桐の代用品として引き出しの箱に使われるほか、小箱やスパイスラックなど小物作りにおすすめ！ 【DIYに使いやすい木4】SPFについてどこでも安く手に入って加工もしやすいSPF。DIYには定番の材料です。SPFの注意点や使い方をまと
写真の一部がちょっとだけ動く、シネマグラフを使ったサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マラガの海の贈り物ことディレクターのSEKOです。 梅雨は嫌ですね。急に大雨が降ったり、雷が発生したりと自然の恐ろしさを日々感じております。 ところで皆さん、シネマグラフという言葉を聞いたことはございますか？ Web系であればご存知の方も多いと思いますが、念のため簡単に説明させていただきますと「画像の一部分のみがアニメーションで動いている画像」です。 そうは言ってもイメージしづらいと思いますので、まずは実際のシネマグラフをご覧ください。 出典： Arte em GIFs – Embrulha https://www.embrulha.com/arte-em-gifs/※現在は閉鎖されています。 New York Fashion Week – Cinemagraphs https://cinemagraphs.com/nyfw/ Fashion Editorial – Cinem
[CSS]レスポンシブ対応、スクリプト無し、完成度も非常に高いタブコンテンツを実装するテクニック
スクリプトは一切使用せず、デスクトップ時はタブコンテンツ、スマフォ・タブレット時はタブをスケールダウンに変更してコンテンツを表示するスタイルシートのテクニックを紹介します。 単にレスポンシブ対応のタブというだけでなく、コンテンツの切替やタブのホバーエフェクトなど、非常に完成度の高いタブコンテンツに仕上がっています。 スケールダウンの仕組み 実装はこんな感じになります。 HTML まずは上部のコントローラー、このラジオボタンで各タブの動きを制御します。 デザインを変更して利用したり、タブのみにしたい場合は非表示にするのも有りですね。 <!-- TAB CONTROLLERS --> <input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> <input id="panel-2-c
Web制作者もクライアントも注目しておきたい、魅力的なWeb制作会社・クリエイター集団のまとめ
Web制作会社の一つの基準はいいサイトを作っているかどうか、クリエイティビティに溢れる日本のWeb制作会社・Webクリエイター集団はたくさんありますが、その中から特に注目している集団を厳選して紹介します。 制作者としてよい刺激を受けるだけでなく、一緒に作ってみたいと思ったり、クライアントとして声をかけたくなるような魅力的な集団ばかりです。 株式会社バケモノ LETTERS, INC. 乾設計事務所 quip Design 株式会社ディスカバリー号 mount inc. 株式会社バケモノ 株式会社バケモノ 名前のインパクトだけでなく、クリエイティブのインパクトも圧倒的な株式会社バケモノ。 この春設立したばかりなので初耳の人も多いかと思いますが、クオルトグラフのメンバーが立ち上げた新会社です。 「なんだかわかりやすい、どこか使いやすい」をキーワードにさまざまなWebサイトをプロデュース・作成し
[JS]映画のエンドロールみたいな演出を加えるスクリプト -End Credits
End Creditsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="static/endcredits.js"></script> </body> Step 2: HTML まずは、エンドロールを呼び出すボタン。 <a href="#creditos" name="creditos">Open Credits</a> エンドロールはdiv要素などに「#credits」を付与し、その中に記述します。通常時は表示されず、ボタンをクリックをすると表示されます。 <!-- Start of Credits -->
[CSS]簡単な記述でアコーディオンコンテンツを実装するフレキシブルボックスを使ったテクニック
2番目にホバーすると、2番目が広くなります 実装のヒントになったのは「Outdated Browser」のメインUIで、このflexboxを使ったUIだけでなく他にも面白い仕掛けが施されています。 Outdated Browser 実装はこんな感じです。 HTML HTMLは非常にシンプルで、各カラムはリスト要素で実装しています。 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> CSS CSSも非常にシンプル、「display: flex;」で各カラムを設定し、通常時に「flex: 1;」、ホバー時に「flex: 3;」になるようにします。 ※flexboxのブラウザのサポート状況 下記のコードは、各カラムにカラーを設定するだけでそのままコピペで使えます。 body { colo
[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで
[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox
demo: video YouTubeの動画もさまざまなアニメーションで表示できます。 Stackboxの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjqury.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../build/css/stackbox-docs.min.css"> </head> <body> ... <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../build/js/stackbox-docs.min.js"></script> </body> Step 2: HTML まずは、モーダ
商用利用無料！再生紙のようなやさしい感じのざらっとした紙のテクスチャ素材 -Rice Paper Textures
Seamless Rice Paper Textures ダウンロードできる素材のフォーマットは、2種類。 .png (すぐに使う用） .pat (Photoshopのパターン素材) どちらもシームレスに、継ぎ目無く利用できます。 紙は全部で12種類、どれもいい感じの風合いです。
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
Intense Images
Intense Image Viewer A javascript library for viewing images in a fully full screen. Click the images to see it in action!
capptivate.co is coming soon
is a totally awesome idea still being worked on. Check back later.
CSS Gradients with background-blend-mode
The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc). It is very new and is curently supported by the latest releases of Chrome, Firefox, and Opera. The property is coming to Safari soon but not available in Internet Explorer. CSS gradients are already immensely powerful
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
Adobe製品の代わりに使える無料アプリ10+
2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すぐに使える！アニメーションを使ったUIエレメントのスニペットのまとめ -Kickdrop
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ
Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ