こんにちは。 アートディレクターの野田です。 年越しを会社にて行い、年始から悪い父親の見本となりました。 皆様も働きすぎには注意してください。崩れます。色々。 今回も気になったWebサイトを紹介させていただきます。 クリスマス時期ということもあり、比較的赤と緑、白をベースにしたサイトを多く見かけました。 クオリティも高く、どれも見ていて楽しいものです。それではどうぞご覧ください。 Santa Stories http://www.santastories.be/ おそらく、サンタ率を確認できるサイトです。ユーザ選択型のサイトが増えていますが、クリスマスに合わせた面白い企画です。 #santa　#story　#christmas Moeko Abe http://abemoeko.com/ フォトグラファーさんのWebサイトです。ページ遷移時の演出や光の取り入れ方をうまく使った演出がさすがだ

こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 Web業界の会社に勤めていると、日進月歩の新しい知識や技術を習得することが大切だと気づかされることが多いです。 僕も技術者の端くれですから、1日32時間くらいは当然勉強しているんですが、一番の楽しみはいろいろな場所で開かれている勉強会・セミナーに行くことだったりします。 勉強会に行くとその道のプロに教えてもらえますし、仲間もできてモチベーションが上がりますよね。 そこで今回は、そんな勉強会を探すのにうってつけのWebサービスをご紹介させていただきます！ IT/Web業界を中心に勉強会・セミナー・イベントが探せるWebサービス6選 connpass　-人をつなぐ IT勉強会・イベント支援サイト- http://connpass.com/ connpassはキャッチコピーの通りIT・Webのセミナー、勉強会

こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht

こんにちは。デザイナーの白浜です。 今回はガーリーなデザイン制作のためにチェックしておきたい素材サイトやテクニックをご紹介したいと思います。 素材編 デザイン枠、飾り罫素材専門サイト「フレームデザイン」 http://frames-design.com/ かわいい飾り枠がいっぱい！　デザインにフレームを取り入れたいと思ったとき、とりあえず覗きに行ってしまいます。 pngとaiデータが揃っていてうれしいです。大変お世話になっています。 吹き出し素材専門サイト「フキダシデザイン」 http://fukidesign.com/ 当ブロクでも何度か紹介している定番サイト様ですが、ゆるふわなサイトには吹き出しがつきものですよね！　こちらもaiデータを配布されています。 ガーリー素材 | 無料フリーイラスト素材配布サイト http://girlysozai.com/ 可愛くてクオリティの高いイラスト素

ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の

こんにちは、デザイナーのぺちこです。 ぼーっとしている間に妹が高校を卒業していました。さらに、実家に顔を出したら成人式の話をしていました。なんというか、何もかもが衝撃です。 さて。デザイナーならmacじゃないの？という声もよく耳にしますが、コーディング＆（IE）デバッグのことを考えると、Windowsの方が勝手が良いことも多いです。 結果的にデスクトップとノートでWindowsとmacの2つを持っている人も少なくはないのではありませんか。おかげでタイプミスの多さったら。 ということで、今回は制作に関わるWindowsユーザーのみなさまにオススメのフリーソフトをご紹介したいと思います。 Windowsユーザー必見！ 普段使いにも制作にも役立つ便利ツール5選 お手軽キャプチャソフト「LightShot」 Windows標準機能のスクリーンショットは少々使いにくいですよね。 「ちょっとした修正の

どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！） ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何？ 読んで字の如し、「図形のフォント」です。タイ

最近Photoshopをゲットしたライターのしゅーへいです。 LIGデザイナー陣のデザイン技術をチラチラ見ながら、Photoshopの勉強をしております。ちなみに打倒、王さんです。 今回の記事は、手描きのイラストをデジタルデータ化する方法です。 必要な物は「スキャナ」と「Photoshop」です。今から紹介する方法は、線画でも利用可能なので覚えておいて損はないです。 ストーリー 家にあった中二病ノートに2012年4月に書いたイラストというか文字がありました。なんか「イイナ・・・。」とか思ったので、このイラストをデジタル化しようと思います。 スキャンする まずはスキャナを使ってスキャンします。 320dpiのTIF形式でスキャンしました。綺麗にスキャンできるならJPEGでも良いと思います。 Photoshopでの作業 次に、Photoshopでの作業に移ります。 余計な部分の除去 そのままス

こんにちわ段田です。 今回もWordPressプラグインにスポットをあてたいと思います。 今回は管理画面の投稿画面で役立つプラグインをテーマに紹介します。 1.Parent Category Togglerプラグイン 通常、投稿画面ではカテゴリ項目で子のカテゴリにチェックした場合、画像のように親のカテゴリには自動的にチェックが入りません。 Parent Category Togglerプラグインは自動で親のカテゴリにチェックしてくれます。プラグインインストール後、子カテゴリにチェックすると、自動的に親のカテゴリにもチェックを入れてくれます。 便利！ Parent Category Toggler 2.Save Editor Scroll Positionプラグイン 投稿を保存した時、エディタのスクロールは一番上に移動してしまいます。このスクロールの位置をそのまま動かさないようにするプラグイ

こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。 公式ページはこちら： https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモ まずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。 実装手順 使用するのは「jQquery」と「waypoints.js」の2つです。 まずはHTMLとCSSを用意します。 CSSの読み込み <link rel="styles

こんにちは、デザイナーのはるえです。 突然ですが、疑似要素と疑似クラスってありますよね。 私がCSSを覚えたてのときは「は？何これ」って感じで、得体の知れないものを見るような目で使ってました。 「この2つって何が違うの？」「どれが疑似要素で疑似クラス？」「どういうときに使うの？」と何かと敬遠しがちな人も多いと思います。 ですが、この2つを使うことでできることがぐんと広がるので、今では恐縮しながらありがたく使わせていただいております。 疑似要素とは 疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。 よく使われる疑似要素 :before{} :after{} :first-letter{} 疑似要素の中でも特に「:before」と「:after」を極めると、CSSだけのデザインの表現幅が一気に広がります。 例えば、LIGブログでも使用している「blockquote

先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！

一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。 ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね！僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。 そういうのをWeb上でもインタラクティブに出来たら最高ですよね？如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。 でも、それも過去の話！ とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状…　とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。 今回は、手間暇要らずで

お疲れ様です。外が暖かくなってもこたつから一向に離れられない、モモコです。 ロゴを作ろうとなっても、なかなかアイデアが浮かばない！とお困りではないですか？ 今回はそんなあなたに、ロゴを作る際に参考にしたいギャラリーサイトをまとめています。 💡おすすめの高品質なロゴ制作会社8選まとめ ※編集部注：2024年1月に最新情報へ更新しました。 Logopond｜世界中のデザイナーのポートフォリオが見れる https://logopond.com/ Logopondは、世界中のデザイナーが作成したロゴのポートフォリオが見れるギャラリーサイトです。見切れないほど膨大な数のロゴが掲載されているので、「とにかく数をみたい」という人におすすめ。 タグやカテゴリーで方向性を絞って探せるのが便利ですね！ Logospire｜一覧性に優れたギャラリーサイト https://www.logospire.com/

こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ

どうも！こんにちは。 みなさん最近計算してますか？僕はしてません。 今回は何でも答えてくれる計算機、すなわち神の計算機を発見してしまったのでご紹介します。 某中学入試問題を解いてみる 突然ですが、こちら某中学入試の1問目です。まずは自力で解いてみました。みなさんは解けますか？ 僕はご覧の通り、式をたくさん描いた割には解にたどり着けませんでした。あと一歩だったんですけどね。 そこで登場するのが今回ご紹介したい神の計算機Wolfram Alpha。（以下Wol神） http://www.wolframalpha.com/ 早速さきほどの計算式を入れていきます。 計算結果がこちら！途中計算式やグラフまで描いてくれます。すごすぎる！ 解は３でした。 実はこの計算機、計算機能だけでなく、wikiのような辞書機能や数値を比較することもできます。 実際に触ってみてもらえばどんなものかわかると思いますが、

こんにちは、デザイナーのハルエです。 イラストやパーツ、背景など、素材の作りこみが必要なときにフリーのベクター素材ってものすごく重宝しますよね。そのまま使うこともできますが、そこから自分なりのテイストに変えてデザインしちゃえばより良いものができるはず！　時間がないときなどにも凄く助かります。 今回は、高品質なベクター素材が無料でダウンロードできる厳選した8サイトをご紹介させていただきます。 独学でつまずいていませんか？ Webデザインの基礎を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） 高品質なベクター素材の無料ダウン

こんにちは、目の前の窓から冷気が吹き込んでこの席寒い。もりたです。 LIGブログでは毎月アクセス解析を公開しているのですが、そういえばOSの情報は載ってなかったですね。 LIGブログを見ている人たちはWindowsとMacどちらのほうが多いでしょうか。 私は家ではWindowsですが、純正モニタの画面が綺麗なのとカラーマネジメントをそれほど気にしなくていいという理由から会社ではMacを使わせてもらってます。 でもやっぱりOSが違うといろいろ勝手が違って困りますね。 というわけで今回はWinユーザーがMacに馴染むためにまず入れておくべきアプリケーションや覚えておくと便利な設定などを紹介してみます。 ちなみにアプリは全部無料です！（2013年1月時点） とりあえず最初に 拡張子を表示させる 本当にWinからMacに移行するならデータの移動などなど、Winで作ったファイルをMacに入れることも

どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ

(……きこえますか……きこえますか) Σ(◉◒◉)ん？ (……どうもです……はやちです(:3_ヽ)_) ？？？(◉◒◉)三(◉◒◉)？？？ (いま……あなたの……心に……直接……呼びかけています…(:3_ヽ)_) (◉◒◉;)お　俺にか……？？ (以前「スマホサイトに入れると使いやすくなる！おすすめjQuery4選！」の中でアコーディオンメニューを紹介しましたが、他にも参考になるデザインとUIはないかなと思い集めてみました。ご紹介します……(:3_ヽ)_) (◉◒◉;)ほ　ほほう Flexible Slide-to-top Accordion （矢印がくるっと回ってアコーディオンが開くタイプ。矢印の動きがおもしろいですね。_(:3」∠)_) (◉◒◉)ほほう DEMO http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/ SI