「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
ノンjsで「パーティクルアニメーション」を実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
100記事到達を目前に、これまで書いた記事を振り返ってみた( ˘ω˘)☞三☞ｼｭｯｼｭｯ【はやちの黒歴史】 実装方法 今回は、divを動かしたいぶん用意して、css3のanimationで実装してみます。手順は下記の通り。 html divの中にsvgも入れ込んでみます。 <div class="particle-wrapper"> <div class="particle"></div> <div class="particle">//svg省略</div> //中にsvgも仕込んでみる //particleのdivが２０個続く </div> css sassのfor文の中にanimationのキーフレームを書きます。 @for $i from 1 through 20 { //この中に記述 } キーフレームアニメーションを設定。 transformの中はsassのrandam関数を使用
君に届け！LIGブログの表記ルール【保存版】
※こちらの記事は2015年版です。LIGブログの2018年版 最新の表記ルールはこちらの記事へどうぞ。→まだ「文字校正」で消耗してるの？ LIGブログの表記ルールについて整理してみた こんにちは、エディターのエリー（@__erI_）です。 およそ100人。それが現在のLIGの社員数です。 そして、LIG社員には毎月1本のブログ記事を書くという使命があります。これはもう大波乱だ！ということで、LIGブログの表記ルールをここにまとめます。 社員のみんなに、届け！ LIGブログの表記ルールは日本語表記ルールブックや記者ハンドブック、先人たちの教えなどによって作られてきました。 WebライターやWebメディア関係者のみなさんにとっても、表記ルールの一例として何かしら参考になれば幸いです。 ひらがな表記にする漢字一覧 以前、「ハフィントンポスト」の「ちょっとひらがなに直すだけで、文章はこんなにプロっ
PhotoshopでWebデザインを効率化するための便利な使い方 | ページ 3 / 3 | 東京上野のWeb制作会社LIG
こんにちは。LIGブログ編集部です。いつも「時間が足りない！」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか？ Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の
Googleスプレッドシートの基本事項と知っておきたいアドオンまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集部です。 業務上でGoogleスプレッドシートを使う方も多いのではないでしょうか？ Excelと同じ機能を持つスプレッドシートは、複数人で同時に編集ができるなど使い勝手がよく、ビジネスツールとして欠かせない存在です。 今回は、そんなスプレッドシートの基本事項と知っておくと便利なアドオンをまとめました。 スプレッドシートでできること https://www.google.com/intl/ja_jp/sheets/about/ まずは、スプレッドシートの機能で代表的なものをご紹介します。 Excelのように表計算ができる リスト作成からお金の管理、データの分析など、表の作成やデータのビジュアル化などに適しています。 Excelの機能がそろっているのはうれしいですね。 複数人と共同作業ができる 共有ボタンを押せば、好きな人といつでもどこからでも、スプレッドシートを編
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
アニメーションが表現できる直感的なUIデザイン・プロトタイピングツール「Atomic」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 今回はUIデザイン・プロトタイピングツールの「Atomic」をご紹介します。 ブログのネタ探しにネットサーフィンをしていたら偶然見つけたものなのですが、サイトを見ているだけで簡単そう＆すごそう！と思ったので実際に使ってみました。 Atomicとは https://atomic.io/ まずは、思わず使いたくなった紹介動画をご覧ください。 アニメーションまでつけた分かりやすいプロトタイプが、なんともサクサクと簡単に……！しかも無料。（beta版だけかもしれませんが） これはとりあえず試してみるしかない！ 公式サイトの「SIGN UP FOR FREE」から登録ができます。 「Atomic」の特徴 それでは「Atomic」の特徴について、くわしくご紹介します。 ブラウザ上で使える 「Atomic」は、WindowsでもMacでも使えるオンラインツールなので
【エラーコード】HTTPステータスコードの原因一覧 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エンジニアのふとしです。 ネットをしていて、以下のような文言に遭遇することはないでしょうか。 404. that’s an error. この状態を見た親から「インターネットが壊れた！」と連絡がきたことがあるので、簡単に説明しようと思います。 普段インターネットをする際には意識しないかもしれませんが、この数字はそれぞれに意味が存在する「HTTPステータスコード」と呼ばれるものです。 ウェブサーバとブラウザの仕組み インターネット経由で情報を得る場合、ブラウザ（IEとかChromeとか）がサーバからページを取得しているというのは、みなさんなんとなく知っているかと思います。 サーバはリクエストに対しHTML形式でデータを返す みなさんのブラウザからサーバに「このページが見たいよ」というリクエストが送られると、サーバはHTML形式でデータを返します。 HTML形式はブラウザが解析できるファイル形
コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ
UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
初めまして。アメリカからやってきたUIデザイナーのCorey（コーリー）です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由（Why I Use Sketch） http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま
iPhoneのバッテリーを長持ちさせる方法17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 「いいオフィス」 管理人 & ディレクターのセコです。 みなさん iPhone はお持ちですか？ 持っているといろいろと便利ですが、難点は電池の消費が早いこと。これが一番の悩みです。朝にフル充電したのに昼過ぎにはバッテリーがなくなる、という経験を何度もしてきました。 そこで今回は、どうすれば iPhone のバッテリーを長持ちさせられるのかについて調べてみました。 iPhone 全般に適用できる内容ですので、iPhoneユーザーの皆さんは是非この記事を読んでお試しくださいね！ ※今回記事で使っているのは iPhone6 です 1. バッテリーを大食いしているアプリを突き止める どのアプリのせいでバッテリーを多く消費しているかをチェックしましょう。 【方法】「設定」 → 「一般」 → 「使用状況」 → 「バッテリーの使用状況」 「以前は使っていたけど最近はもう使ってないなぁ」と
宣伝や販促を加速する、感情を揺さぶったプロモーションWebサイト事例から学ぶこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 突然ですが、最近、サイトを制作するにあたって「どうやってユーザの感情を揺さぶるか」ということを頻繁に考えています。 コーポレートサイトにしてもプロモーションサイトにしても、「その企業の事業内容」や「製品」だけをシンプルに取り出してしまうと、同じような会社や製品が複数存在するものです。 もちろん細かく掘り下げていけば差別化できる部分は必ずあります。 しかし、制作の際にヒアリングをしたり調査をしたりと時間をかけて発見した差別化のポイントが、ただ並べたり比較するだけで、本当にユーザに届くのだろうか……。 どうすればユーザに届くのか？ ぐるぐると考える中で行きついたのは、ありきたりですが「感情を揺さぶる」ことでした。 「ああそれ分かる」と共感させること 「想像」や「当たり前」を良い意味で裏切ること それを見た（体験した）人が楽しいと感じたり、切なく思ったりする
2014年12月 デザイン・表現方法・コンセプトが気になったWebサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 アートディレクターの野田です。 年越しを会社にて行い、年始から悪い父親の見本となりました。 皆様も働きすぎには注意してください。崩れます。色々。 今回も気になったWebサイトを紹介させていただきます。 クリスマス時期ということもあり、比較的赤と緑、白をベースにしたサイトを多く見かけました。 クオリティも高く、どれも見ていて楽しいものです。それではどうぞご覧ください。 Santa Stories http://www.santastories.be/ おそらく、サンタ率を確認できるサイトです。ユーザ選択型のサイトが増えていますが、クリスマスに合わせた面白い企画です。 #santa #story #christmas Moeko Abe http://abemoeko.com/ フォトグラファーさんのWebサイトです。ページ遷移時の演出や光の取り入れ方をうまく使った演出がさすがだ
イラストレーターに学ぶ、可愛いイラストの描き方と妄想力で勝負するアイデア発想法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。株式会社スクーの田中伶です。 皆さん、お正月はどうでしたか？ 私はおめでたいムードの中、年賀状の隅に書いてみた羊があまりにも残念で、絶望的な気持ちになっておりました。 そんな私でも！ 可愛くてネタになるイラストをさくっと描けるようになってみたい！ ということで今回は、schoo（スクー）WEB-campusで実際に開講された授業「クスッと笑えるイラストのアイデア発想法と描き方」から、イラストアイデアの発想法をまとめてお届けしたいと思います。 人物紹介：りゃんよ先生 イラストレーター、漫画家。 1987年生まれ。大人のオモチャを作ろうと某玩具会社に就職するが、子供のオモチャ会社だったので退職。その後、フリーのイラストレーターになり、４コマブログで大人のオモチャを頻出させている。カワいくてコミカルなイラストから、女子の本音たっぷりの４コママンガまで、幅広く活動中。 りゃんよ先生プ
Photoshopを使ってシネマグラフを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
動画を準備する シネマグラフの完成度は動画のできにかかっています。主な条件は以下の3つです。 ネマグラフがうまくできる条件 1. カメラが固定されていること シャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚＆リモートシャッターなんかがあるといいと思います。 2. ループの繋ぎ目が気になりにくい動きであること 髪の毛のふわふわとか水がチョロチョロ流れる動きなど、動きが単純で短い時間でも成立するものが向いています。しかしこういった動きはすでによく使われていて、マンネリなのも事実ですね……。アイデアをひねり出すのが一番大変な作業かもしれません。 3. 動いてる部分の背景に動きがないこと 後で詳しく説明しますが、動画の上に静止画を置いて、動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。 以上の点を踏ま
レース素材などが豊富なガーリー素材サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの白浜です。 前回「ガーリーなデザインがしたい！おすすめのサイト＆テクニックまとめ」を書いたのですが、まだまだご紹介しきれなかった素材サイトがあったので、part2を書きました！ 引き続き、ガーリーなデザインに興味がある方はぜひチェックしてみてください。 ブラシ編 Photoshop用ブラシ ガーリーなブラシ素材、実は結構あります。まずはPhotoshopから。 無料(フリー)素材「レース（ライン）のPhotoshopブラシ素材」 http://webworkkit.minibird.jp/photoshop/brush/lacelinebrush.html シンプルで使い勝手の良いPhotoshop用のレースブラシです。種類も5つあるので雰囲気に合わせて使えそうですね。 こんな感じでブラシの間隔を調整すればビーーーっと継ぎ目のないレースのラインが引けます！ ちょっと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
