ページトップへ戻る！ jQuery非依存のライブラリ「MoveTo」でスムーススクロールを実装しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 夜中でも買いに行ってしまうくらい、コンビニの肉まんにどハマりしています。そんな便利なコンビニも、24時間営業を見直す、というニュースが流れ、時代の流れを感じています。 フロントエンド界隈でも時代は流れ、以前はデファクトスタンダートと言われていた（らしい）jQueryは、ブラウザの実装が進むにつれ、使われないことも増えてきました。 そんな中、実装に困ったのが「ページトップへ戻る」ボタンでした。そこで今回は、jQueryに依存せず「ページトップへ戻る」を実装できるライブラリをご紹介します！ MoveTo 「MoveTo」は、Webサイトにスムーススクロールを実装できるライブラリです。 スムーススクロール ページ内遷移などでスムーズにアニメーションすることなどを指します。 有名なものだと、多くのサイトで見られるインターフェースの「ページトップ
UIデザイナーとWebデザイナーの違いって？ Webデザインを始める前に知っておきたいこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 Pooleチームのアートディレクターの竹原です。 本日よりLIGデザイナー陣による新連載「Webデザインをはじめよう」が始まります。この連載はこれからWebデザイナーを目指す人、またWebデザインへの興味を深めたい人に向けた連載です。 Vol.1ではWebデザイナーの仕事の内容や、制作に必要なマシンやツールのご紹介、Webサイト１つ作るのに具体的にどんなものをデザインすればいいのかについてご紹介します。またVol.2以降では、Webデザイナーが知っておくべきHTML/CSSの基礎知識や、Webサイトを実際にデザインしていく過程をご紹介していく予定ですので、お楽しみに。 さて、Vol.1の第一回目となる今回は、本題であるWebデザインの説明に入る前に、そもそも「デザイン」とは何なのか、「デザイナー」とはどういう職業なのかについて簡単ではありますが、ご説明できればと思います。 そ
WordPressサイトの管理者向けセキュリティ対策方法チェックリスト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様はじめまして、モリイです。本業ではWordPress専用のセキュリティ診断サービスを運営しています。 さて、ご存知の方も多いとは思いますが、WordPressは攻撃者によく狙われます。 その理由の1つは高い導入率です。LIGブログでも以前こちらの記事「みんなは知ってる？WordPressの特徴と人気の理由を分析してみた」で紹介されていたように、世界で一番人気のCMSです。WordPressで作成されたサイトは世界中に9000万以上あると言われており、悪意を持っている人物にとっては格好のターゲットです。 また、WordPressだけではなく、CMS一般、例えば、Drupal、EC-CUBEなどにも言ることですが、構造がパターン化されており、そのCMSを利用しているということが一目でわかる、ということも攻撃される理由に挙げられます。 そこで、サイト管理者は攻撃者からサイトを守らなければいけ
10年後の日本はマジでヤバい――『pairs』エウレカが海外展開に注力する本当の理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集部のナッツです。 日本の人口減少が叫ばれる昨今。少子高齢化からはじまり、年金問題、下流老人と様々な課題がいま浮き彫りになってきました。 そんな中、縮小していく日本市場だけでなく、海外進出を進めている企業があります。それはマッチングサービス『pairs』やカップル専用アプリ『Couples』を運営し、2015年にはMatch、Tinder、Vimeoといったサービスを傘下に置く米国 Inter Active Corp（IAC）にグループ入りしたエウレカ。 「ユニバーサルに優秀な人材を育てる」ことを掲げ、海外事業進出に積極的な同社は、いまどのようなアプローチを試みているのか。また、米国企業の傘下に入って約1年が経とうとしている中で、今後どのような展開をしていくのか。 男女ツートップ共同創業者として、いま注目を集めているエウレカ副社長の西川さんにお話をお伺いしました。
デザイナーがバナー制作でお小遣い稼ぎをするための全知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ソウルドアウト株式会社のなごです。 Web制作で収入を得たい・増やしたい人にとって、バナー制作は空いた時間でサクッとできるのでおすすめです。 昨今は、クラウドソーシングによってバナー制作を外注する企業が増えてきているので、そこまで高度な技術がなくとも、5,000円～50,000円のスポット収入が得られます。 今回は、バナー制作によって、簡単にお小遣い稼ぎをするために必要な知識をすべてまとめました。社会人や学生、主婦の方など、空いた時間にお小遣い稼ぎをしたい人にも、Webデザイナーとして独り立ちするために実績を積みたい人にもおすすめです。 「成果が出る」バナーを作るには？ バナー広告の制作には、デザインスキルだけでなくWebマーケティングやコピーライティングのスキルも重要です。とくに副業や就転職を見据えてプロレベルのスキルを身に着けたい……という方は、Webの知識を総合的に学べる
グッドパッチ土屋氏に訊く“本当のUI”とは？「良いUIは、コンテンツの力を引き出す」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、広報担当のヨシキです。 最近、会議や提案などの場で、“UIにこだわりを” や “これまでにないUIで” などのフレーズをよく耳にするようになったと思います。 しかし「UIとは何なのか」と聞かれると、詳しく答えることはできない、という人も多いのではないでしょうか。実際、僕もその中の一人です。 ユーザーインターフェースの略であること、ユーザーの使いやすさに関わること、というぐらいはなんとなくわかります。しかし、そもそもなぜ今UIなのか、UIデザインと通常のデザインは何が違うのか、など具体的なことはよくわかりません。 そこで本日は、UIの設計・デザインに特化し、あの『Gunosy』の最初のデザインを手掛けたことでも有名な「株式会社グッドパッチ」さんを訪問し、話を聞いてみることにしました。 答えが見えないことは、やはり一番わかってるっぽいところに聞くのが一番簡単な解決方法だと思ったから
世界最高峰の制作会社UNIT9ロンドン本社に行って学んだ「世界標準」の働き方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの岩上です。 先日、ヨーロッパ視察を兼ねてロンドンに行ってきました。 「TENT LONDON」というデザインフェスティバルに先輩のSHIFTBRAINさんが出展されるということで、それを見つつ、現地の制作会社にもお邪魔したりしてみよう… というわけで、同世代のLIG、Letters、BEES&HONEYの3社・男5人でロンドンへ。 ▼イベント＆参加会社紹介 TENT LONDON http://www.tentlondon.co.uk/ Tokyo designers weekのロンドン版。現地のレポートはまた次回。 SHIFTBRAIN http://www.shiftbrain.co.jp/ 国内外のデザイン賞を多々受賞しているお世話になっている会社。 Letters http://letters-inc.jp/ 海外のデザイン賞を多々受賞しているイケてる会社。 B
【オリジナル制作】Photoshopでの作業を効率化できるいい感じのJSXスクリプト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。「とりあえずタイトルに興味を持ったけどいまいちピンとこなかった」という方もいるのではないでしょうか。 ずばり、Photoshopのスクリプト機能を利用して、表題の作業を自動的に処理させるということです。僕みたいな怠け者で楽をしたい人にはぴったり！ 今回主に紹介したいのは自作のスクリプトで、Webに特化した作業を簡単にしてくれます。 ダウンロードはこちら（ダウンロードが開始されます）： https://liginc.co.jp/demo/2012/09/PhotoshopScripts.zip スクリプトを使うには？ まずはスクリプトの使い方について説明していきます。 スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーし、PCを再起動させます。 Windows：PhotoshopPre
プラグインまとめ20選 | 株式会社LIG
1月が終わってしまった・・・・・ どうも正月が恋しい段田です。 今回はWordPressサイトを構築している時に役に立つプラグインを紹介したいと思います。タイプ別で分けて紹介します。 目次 デバッグ系プラグイン 記事操作系プラグイン パーマリンク系プラグイン データ移行・操作系プラグイン その他 デバッグ系プラグイン WordPress構築時にWordPress内の情報を確認したい場合に利用すると便利なプラグインです。 Debug Bar 開発時のデバッグで利用するとても有名なプラグインです。パラメータ情報やエラー情報を確認できたりします。 また、このプラグインの拡張用プラグインもいくつかあるので、多機能です。 必須プラグインと言っていいでしょう。 Debug Bar Debug-Bar-Extender 先ほど紹介したDebug Barを拡張するプラグインになります。利用するときはDeb
GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。
スマホサイト制作センスをアップする！見本・素材・WPテーマ・JS・その他全部丸ごとまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターの内藤です！ 前回の記事（美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ）ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 部品別に見られるサイト その他スマホサイトの部品作りの参考になるサイト スマホサイト素材になるキット フリック用JavaScriptプラグイン スマホ対応の無料WordPressのテーマ スマホサイト制作参考 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。 カテゴライズは業種別のみですが、年月アーカイブがあるので、い
【デザイナー厳選】バナーデザインの参考ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは！ Webデザイナーのえびちゃんです。 バナーデザインを作成していると「レイアウトが上手くいかない」「バナーの参考を上手く探せない、ギャラリーサイトも古いのばかり」「最近のトレンドってどんな感じなんだろう？」……などなど、デザインの悩みってたくさん出てきますよね。 そこで今回は、そんなあなたに現役デザイナーがおすすめするバナーデザインの参考サイトをジャンル別に分類して紹介します！ 後半では実際に効果の高かった広告バナーのデザインも紹介しているので、ぜひ参考にしてください。 「ググってわからないこと」が一瞬で解決するかも？ Webの知識を効率的に学びたい、未経験からWeb業界への転職・就職を目指している、誰かに教えてもらいたい……という方へ。LIGが運営のWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」では実践的なカリキュラムで最短6ヶ月でWe
見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s
Photoshopでお手軽に縫い目を描く小技 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
知ってる人は知っている、でも案外知らない人もいるのでは？ というPhotoshopの小技を自分のメモがてら紹介してみたいと思います。 今回はお手軽に縫い目を描く方法です。 タイトル画像のここです。 この縫い目はphotoshopのブラシで描いています。 まずは普通の円形ブラシを選択して ブラシ先端のシェイプを以下のように形を平たく、間隔を広く調整します。 あとはまっすぐ線を引くだけで縫い目のようなラインがひけます！！ ブラシのサイズや、間隔などを調整すれば、手縫いっぽい縫い目から ミシン目のような縫い目までいろいろ描けます。 ボタンの装飾や、バナーの囲みなんかに使うとかわいいですよ！ LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。 Webサイト制作の実績・料金を見る
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
ポチッとするだけでプロ級の写真処理ができる良質なPhotoshopアクションまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 昨今セピア風やらトイカメラ風何やら、昔っぽい写真のような加工が流行ってるみたいですね。自分的には今の最新鋭の一眼で撮ったまんまのようなクリアな写真のほうが好きだったりします。 とはいっても、たまには古き良き昔の写真も味深くていいのかもしれないですね。デザイン的見地から見ても色が統一されてたり、色の寒暖差が出たりで印象的な写真になりやすいものね。 スマホとかでその手のアプリが多数出回っているので、カスタマイズ性は低いものの、割りと手軽にできますが、パソコンなら言わずと知れたことだが、Photoshopで加工する場合がほとんどだと思います。 スマホよりは自分好みにいじれるが、いざやろうと思うとなかなか手間がかかって面倒だったりします。加えて、枚数が多い場合なんかはさおさらそうです。だがしかし！アクションを使えば一気に形勢逆転！ 寒色系 Purple wonde
必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
