ドットインストール代表のライフハックブログ
![IDEA * IDEA](https://cdn-ak-scissors.b.st-hatena.com/image/square/30ee66131f901a68a50c33f183d88b3f1c6b6d9e/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Fwp-content%2Fuploads%2F2013%2F07%2FRegex-Crossword.png)
こんにちは、デザイナー兼フォトグラファーのおまめ (@omame_creator) です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください! 独学でつまずいていませんか? Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい!」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
当サイトは既にご承知の通りwordpressという無料CMSツールを活用して構成されております。 wordpressを活用する利点は無数に存在し、その魅力に取りつかれたユーザーは世界中に数多く存在します。 結果として世界レベルで多くのサイトがwordpressにて作成され、日進月歩でシステムの向上が図られております。 ワードプレステンプレートについて wordpressの利点の1つにテーマ(デザインテンプレート)の存在があります。 世界中のデザイナーがオリジナルのテンプレートを公開しており、その数は日々増加しているのです。 私のような凡人は、このような公開テンプレートを活用することにより、専門知識が乏しくてもお洒落で綺麗なホームページを作成することができるのです。これは本当に素晴らしいことです。 まず、知っておくべきことはwordpressのテーマには【無料テーマ】と【有料テーマ】が存在す
画像をはじめ、画像ギャラリー、そして動画、HTMLコンテンツ、外部サイトなど、あらゆるコンテンツを拡大表示するjQueryのプラグインを紹介します。 あらゆるコンテンツをサポートします。 画像、画像ギャラリー、動画(HTML5, YouTube, Vimeoなど)、Flash/swf, Google Maps, iFrame, AJAX, Alert/Confirm/Promptなど 主要なブラウザ全てをサポートします。 IE7/8/9/10, Firefox, Chrome, Safari, Opera iOS4+, Android 主要なデバイスを全てサポートします。 デスクトップ・タブレット・スマートフォン スワイプ操作やRetinaディスプレイもサポートしています。 iLightBoxのデモ デモではあらゆるコンテンツをiLightBoxで拡大表示します。 まずは、画像一枚を拡大表
若かりし頃、上司から「アイデアを出せ」「次の会議までにアイデアを考えておけ」と言われ、 そのたびに「またアイデアかよ・・・。」「全然思いつかない・・・。」と悩んだものです。 アイデア本を片っ端から読んで試してみましたが、そう簡単にはアイデアは出ないもので、上司へのアイデア報告は大変苦痛だったことを思い出します。 そんな当時の自分に「オズボーンのチェックリスト」を教えることができれば、ずいぶん状況は変わっていたのではないかと思います。 「オズボーンのチェックリスト」は、「入れ替えてみたら」「大きくしてみたら」「逆にしてみたら」などと、1つのお題からアイデアを大量生産することができるフレームワークです。 アイデア出しに困っている方、ぜひ「オズボーンのチェックリスト」を試してみてください。 「オズボーンのチェックリスト」は、どんなツールなのか? 9つの視点から、アイデアを発想できるツールです。
ウェブデザイナーやウェブアプリの開発者は利用しているユーザーにメッセージや指示を送る際に「文字」に頼りすぎる傾向があります。文字による説明は簡単ではあるものの、アプローチの仕方を間違えるとユーザー側は読まずに無視しがちになり、台無しになってしまいます。 そこでInvitelyのヴァイスプレジデントであり、開発ディレクターでもあるMichael Woloszynowicz氏がどうすればいいかをヒートマップ付きでわかりやすく解説しています。 Web 2.0 Development and Business Lessons: Your Users Won't Read http://www.w2lessons.com/2012/01/your-users-wont-read.html まずInvitelyというウェブサービス自体がドキュメントの共有などのコラボレーション作業のために利用者を招待す
jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…!」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは!」と思った作品をピックアップして紹介したいと思います。(コンテストの審査とは関係ないですよ!) CSSだけを使って必殺技の演出を加えてください スーファミのRPG風 えい!:forked: CSSで必殺技! - jsdo.it - share JavaScript, HTML5 and CSS 光が集まる必殺技 forked: CSSで必殺技!第2弾! - jsdo.it - share JavaScript, HTML5 a
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
CSS3 animated dropdown menu - RedTeamDesign CSS3単体でアニメーションするドロップダウンメニューを実装 ドロップダウンをCSSのみでしかもクオリティもよく実現できているサンプルです JavaScriptがいい加減にせい、というぐらいの出来になっております 選択肢が広がるというのはいいことですね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 Google+風のボタンUIセット&ドロップダウン
AndroidブラウザのFlashPlayerの開発が終了したり、HTML5製の3Dコンテンツが出てきたりで、「Flash終わったの?」とか、「これからはFlashじゃなくて全部HTML5で作った方がいいの?」とか聞かれる事が増えてきたので、ちょっとまめとめてみました。 同じような境遇の方も少くないと思うので、参考程度にどうぞ。 AndroidブラウザFlashPlayerの開発終了について 残念なことにAndroidブラウザのFlashPlayerはバージョン11.1を最後に開発は終了することが発表されました。これについて「AdobeがFlashよりHTML5の方が優秀だと認めた」や「HTML5を推奨していたジョブズの完全勝利!」と考えている方もいるかと思いますが、実際のところどうなのでしょうか。 記事を参考に、開発終了の理由についてまとめてみました。 【参考記事】 ・ Clarific
SSL証明書選びを間違えると せっかくのスマホからの売上を逃すかも? ECサイト運営者にとって、スマートフォンへの対応は火急の課題です。実際にスマホ対応を進める際にはデザインや操作性に配慮する必要があるのはもちろんですが、意外と忘れられがちなスマホ対応のポイントがあります。それは、ECサイトに不可欠なSSLサーバー証明書に関する問題です。 ECサイトのスマホ対応でSSL証明書を気にしなければいけないというのはどういうことでしょうか? それは、ケータイECで起きている問題と同様のものです。ショッピングカートなどのHTTPS通信のためにサーバーでSSL証明書を利用しますが、一部の証明書ベンダーの発行する証明書では、端末によってはSSL通信が有効にならないという問題です。 これと同様のことをスマホでも意識しておくのが大切なのです。 スマホ市場で一大勢力となっているAndroid端末を例に説明しま
多くのWeb屋がぶち当たるであろう関門の一つに、クライアントからの無茶振りがあります。 「いや、それはちょっと・・・」 と、心の中では思っているのに、まぁそれも仕事の一つで制作する事になるでしょう。 もしくは、そんなのは絶対やめたほうが良いですといって跳ね除ける人もいるでしょう。 そんなクライアントとの大きな溝は、インターネットそのものを広告と考えているからかもしれません。 インターネットとは人そのものである 単純な答えですが、こうやって考えるようにスイッチすると意外と多くの知恵が湧き出てきます。 実際にこの考えは抽象的なもので、科学的ではないし、具体的でもない。 曖昧ではあるが、あなたがインターネットに接続する行為その物が、人間らしい欲求によるものだという事。 2ちゃんねるに書き込むのも、メールをするのも、Webサイトから情報をみるのも、ブログを書いて情報を発信するのも、まず始めに何らか
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター(エミュレーター?よくわからn)はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな?w 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
Div Linker | jQuery Plugins div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」。 次のようなマークアップがあったとして、この場合は「Link text」部分にしかリンクされません。 <div class="divlinker"> <img src="image.jpg" width="151" height="130" /> <br /> <a href="//www.google.com">Link text</a> </div> そこでこちらのプラグインを使って初期化します <script> $(".divlinker").divlinker(); </script> するとDIV全体がクリックできるようになるというもの。 デモページ HTMLをきれいにかきつつdiv全体を<a>みたいに動かすことができます 関連エントリ RSSやA
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く