Webサイトに動画を埋め込む際のサイズと軽量化方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、HALです。 今回は、動画をWeb用に軽量化するための方法を紹介します！ 軽量化を行わないと、たとえば 1280px × 720pxの30秒ぐらいの動画の場合40MBほどの重さになってしまいます。そのままだと videoタグなどでWebブラウザ上で再生するには大きすぎてしまいます。モバイル端末ならさらに軽量化が必要です。 動画の軽量化をするにはさまざまなツールがありますが、 HandBrakeというツールがとても使いやすかったので、基本の設定方法を紹介していきます。 ※この記事は2022年3月に編集部が情報を更新しました 動画を埋め込む方法 外部リンクで埋め込む YouTubeやVimioに動画をアップロードし、それを外部リンクとして埋め込む方法があります。 YouTubeではさまざまなサイズの動画をアップロードすることができますが、標準のYouTube動画のサイズは1920×
【ごっつ秋葉原店】ネギとチャーシューのコラボレーションは幸せっす | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近、洗濯機が壊れたんで某電気屋に見に行ったっす。洗濯機自体で平均3万はして、設置や配送を含めると4万はかかることがわかったっす！ 家電が壊れるってお金かかるんすね。まあ今だけで言うと家の電気が止まっているので、あんまり壊れてても関係ないんすけどね。 さて、本日は秋葉原でがっつりラーメンを食べるならココ！ ってところを会社で教わったので行ってみることにするっす。 本日の一杯・ごっつ（秋葉原店） そんな感じで到着っす！ 日に日に顔が大きくなってきている気がしますが、一旦は気のせいということにするっす。看板にあるように「超ごってり麺」とのことで、こってり好きな僕としてはかなり期待できそうっすね……。それでは入店するっす！ 券売機っす！ 見にくくて申し訳ないんすけど、この券売機で何を言いたいかというと、こちらのラインナップで一番安いメニューで850円、それ以外は基本1,000円超えのメニューが並
【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた こんにちは、デザイナーのもりたです。 突然ですが皆さん、整理整頓は得意ですか？ 私の会社のPCのデスクトップはスクリーンショットだらけです。 よく整理整頓の第一歩はルールづくりだと言いますね。 リモコンはサイドテーブルに置く、雑誌はラックに入れる、シャツ類は一番上の引き出しに入れる……。でも、整理整頓ができる人にはきっとわからないけれど、自分に合わせたルールをつくるのが一番めんどくさいんですよ！ だからデザイナーの間でもPSD（Photoshop Document）のレイヤー整理がまちまちだったり、同じ人でさえ場合によって変わったりします。そこで、いちいち考えることすらめんどくさくなったので、社内共通のルールをつくってしまおうということになりました。 せっかくつくったので、今回はそれをご
【CSS設計】拡張や修正に強いコンポーネントをマークアップする6つのテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 皆様、CSS書いてますでしょうか。 今回はSMACSSやBEMをある程度ご存知の方向けに、コンポーネントをマークアップする際に役立つテクニックと題して、「SMACSSを使う際に役立つテクニック」「BEMを使う際に役立つテクニック」「さまざまなシーンで役立つテクニック」をご紹介したいと思います。 なお、SMACSSやBEMをご存知ない方は、本記事の参考文献＆記事のリンクが参考になると思いますので、はじめにこちらをご参照いただければと思います。 ※「コンポーネント」という言葉は、使われるシーンによってさまざまな意味になりえますが、本記事においては「Webページを構成するパーツ」と定義させていただきます。 SMACSSを使う際に役立つテクニック編 まずはSMACSSを使う際に役立つテクニックからご紹介します。
文章の内容が薄いときに過不足のない原稿をライティング・編集するためのテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集長の朽木（@amanojerk）です。先日schooでWebライター向けにライティングの授業をさせていただいたのですが、そのなかで自作の二次創作小説をアナウンサーさんに朗読させてグッとくるという人としてギリギリの行為におよびました。でもプロの話し手ってすごいんだぜ、声とかキレイなんだぜ。 授業のタイトルは『原稿の文字数を過不足なくコントロールするための文章テクニック』だったのですが、テーマは“自分の文章の内容が薄いときにどうするか”です。みなさんにおかれましても、企画書や報告書、ポートフォリオ・ビジネスメールなどの文章を作成したあとで、見直すと何か言ってるようで何にも言っていないような印象を受けることはありませんでしょうか。 せっかく何かを伝えるために文章を書くのであれば、情報や熱量がギュッと詰まった、過不足のない文章にしたいものですよね。そんなあなたにご紹介し
【随時更新】IT企業やWebサービスのロゴデータをダウンロードできる公式ページ集めました | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 今回はブログのアイキャッチなどでよく使いそうな、ロゴデータをダウンロードできるオフィシャルサイトを集めました。 僕自身アイキャッチを作っていて、いちいちロゴの素材を探しに行くのは面倒だと思っていました。この機会にまとめて、見つける度に随時更新しながらストックしていこうと思います。 ※編集部注：念のためすべての規約に目を通し、適正な利用を心がけておりますが、不備などございましたら編集部までご連絡ください いろんなロゴデータ Facebook Twitter mixi Tumblr Instagram はてなブックマーク LINE Pinterest Youtube Vine Vimeo SoundCloud Skype Evernote ChatWork Dropbox Google Googleドライブ Microso
見ていてわくわくするアニメーションタイポグラフィックスまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。野田です。 夏ですね。夏といったら思い浮かぶのはなんでしょうか。 僕は風鈴の音色とセミの鳴き声です。 前々回からずっとアニメーションネタが尽きないので、今回もアニメーションネタを紹介させていただきます。 少し前からアニメーションタイポグラフィックスというのが僕の中で流行っており、趣味程度に作ったりしています。 これは文字を動かしてアニメーションにする技法で、Animated Typefaceともいい、とても美しく、何度見ても飽きません。 その際に参考にしているVimeoのリンクをまとめさせていただきます。 アフターエフェクトで作成し、gifアニメーションまたはpngで実装してみてください。 長編※音声注意 After Effects : Animatic – Animated Typeface
Webライター・メディア運営者が押さえておきたいコンバージョンする文章のポイント5つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集長の朽木（@amanojerk）です。さっきネットで見かけた“アソコの穴に「突っ込んだら最高だったもの」ランキング”という記事の第1位が“きゅうり in ちくわ”だったので「あっぱれだな」と思いました。 おかげさまでライター生活も5年目に入り、なんとか一生これで食って行けるかなと自分自身信じられるようになってきた今日この頃。Webでテキストを書くことのハードルが下がりに下がった現在の市場において、プロとして差別化を図るべきは文章のクオリティになるかと思います。 しかし、ひと口に文章のクオリティと言っても具体的に何を指し示すのか曖昧です。そこで、僕が思う“よい文章”を3つのパターンに分類してみました。 わかりやすいか 熱量があるか コンバージョンするか 1.について、日記のように他人が読むことを前提にしない文章でない限り、ビジネスメールしかり誰かに何かを伝えたくて
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
忘年会や新年会、ホームパーティーで盛り上がる人気カードゲームまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 いいオフィスの管理人のゆうです。 今年も残すところあとわずかとなりましたね。 みなさん、お正月はどのような過ごし方をされますか？ 今回は、会社の忘年会や新年会、年末年始など、みんなで盛り上がれるカードゲームをご紹介させていただきます。 心理戦が白熱必至のカードゲームはコレ！ 紹介するカードゲームで共通するのは「心理戦」です。 相手の嘘を見抜くゲームになります。（皆さんの演技力の見せ所です！） 大勢でやると、かなり白熱しますよ。 ごきぶりポーカー コウモリ、蝿、ネズミ、さそり、ゴキブリ、カエル、蜘蛛、カメムシの8種類の嫌われ者たちが主役のゲームです！ 相手が出したカードが嘘か本当か見破るという、とってもシンプルなルールです。 前半は心理戦、後半は戦略戦と、プレイヤーの考え方や性格がでるのでおもしろいです！ また2人から7、8人までできるので、人数に縛られないのもおすすめのポイン
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
感嘆符・疑問符の後に全角空白（スペース）が必要になる理由と、Webメディアの表記ルールについて | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集長の朽木（@amanojerk）です。 さて、これからみなさんに、下記のそれぞれの文章を見比べていただきたいのですが、 A. ヒャッハー！汚物は消毒だ〜 B. ヒャッハー！ 汚物は消毒だ〜 A. 何してますか？忙しいですか？手伝ってもらってもいいですか？ B. 何してますか？ 忙しいですか？ 手伝ってもらってもいいですか？ どちらがしっくりくる、あるいは、どちらに違和感がある、と思ったでしょうか。 A.とB.の文章の違いは、文末の「感嘆符（！）」「疑問符（？）」の後に全角空白（スペース）があるかないかです。 ほとんどの人はあまり注意して見てはいないと思うのですが、じつはこの表記ルールはメディアによってさまざまです。絶対に全角スペースを空けているメディアもあれば、そうでないメディアもあります。 では、一体どちらが正式なのでしょうか。そもそも、明確な基準はあるのでし
Webメディアと紙媒体のメリットと違い「掲載できる情報量」「ライター個人の集客責任」など | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集部です。こちらはWebライティングに関する全10回のシリーズ記事です。 さて、Webライティングに興味のある方なら、誰でも一度は「Webメディアと紙媒体の違い」について考えたことがあるのではないでしょうか。 実際、LIGブログ編集部でも、WebにはWebの、紙には紙のやり方があると感じています。そこで今回は、“Webライターならこれだけは理解しておきたい”という4つの違いについて学んでいきましょう。 両者の違いを知れば、より効果的なWebライティングができるようになるはずですよ！ ▼目次 掲載できる情報量の違い ライター個人の集客責任の違い 記事が掲載されることの「権威」の違い 情報の広がり方の違い 1. 掲載できる情報量の違い 紙とWebのライティングにおける大きな違いとして、真っ先に挙げられるのは「字数制限」です。しかしWebライターとして意識しなければなら
被リンクをチェックしよう！リンクを買わずに「集める」SEO対策に取り組む方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも初めまして、ヴォラーレという会社でSEOコンサルタントをやっているじつかわです。趣味は燻製をつくることです。よろしくお願いします。 SEOをやってますというと、「いやあ、なんか最近大変そうですねえ（苦笑）」とか「あ～SEOねぇ～ハハッ」とか「SEOは終わった・・・ﾌｯ」とかいうリアクションをされて、勝手によろしくない印象を受けることが多い気がしています。 でも、SEOはマーケティング上とても重要なファクターですし、できるだけSEOを食わず嫌いしている人をなくしたいなあと思っています。 SEO周りで言うと、「リンクはもう効かない」だとか、「これからはオーサーランク」だとか、「コンテンツマーケティング！」だとかいろいろ言われていますが、今回は結局SEOで気になる「リンクってどうすればいいのよ！？」という話題をがっつり扱いたいと思います。 リンクはSEOにとって重要、確かにそうです 結論か
【あるある】フリーランスのWeb制作者がよく使うハンドサイン一覧 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGブログをご覧の皆様、初めまして。酒井優と申します。 新しくLIGライターとして参加させていただきますので、よろしくお願いします。 さて、私はフリーランスになりたてのWeb制作者なのですが、クライアントからの無茶振りに対応する場合や、仲間と共同開発している時に必ずと言っていいほど発生するやりとりがあります。ま、要は「Web制作あるある」ですね。 今回はそんな「あるある」を巷で流行っているハンドサイン一覧というネタにのせて皆様にお届けしたいと思います。 何の参考になるかわかりませんが、Web制作者なら知っていて損の無いハンドサインですので、よろしくお願いします。 フリーランスのWeb制作者のハンドサイン一覧 IE7以下は対応しません この手のネタの定番、IEネタですね。IEはバージョンごとにCSSの解釈などに癖がありすぎて、Web制作者に取ってその対応は悩みのタネです。むしろIE8すらも
そのHTML5のタグは合ってますか？間違えやすいタグ15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、HTML5カルタ大会という大会で優勝させていただきました。 いやあ、実に光栄です。 そこで今回は、HTML5ネタ繋がりで、“間違えて使ってしまいがちなんじゃないかと思うややこしいHTML5タグ”をまとめてみました。 あ、でも皆さん誤解しないでくださいね。 この記事は大会前にカルタの準備がてら執筆したものなので、決して「このキング・オブ・HTML5こと俺様がレクチャーしてやんよ！」なんてことは1mmも考えておりません。 どうか、一Web制作会社の端くれエンジニアが戯言ほざいてやがるな、まあ暇だし読んでやるかくらいのノリでお付き合いくだされば幸いです。ありがとうございます。 【こちらもおすすめ】 その使い方合っていますか？間違えやすいタグ15選（HTML5対応） “定義”に関わるタグ <dt>,<df
まるで自分の意思があるかのよう！canvasサイトまとめ12選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。たまです。 最近canvasを使用したサイトをちらほら見かけますね。サイトのコンセプトに合えば是非とも取り入れたい表現です。 今回は有機的な動きをcanvas+javascriptで展開しているサイトをまとめてみました。 インスピレーションが湧いてくるな〜。では行ってみよう！ My Life in 20 Years https://www.mylifein20years.com/ ※現在はサービスを終了しています。 facebookと同期してみてください。他のユーザーとの関係を繋ぐラインや読み込み時のローディング等、所々canvasが使用されています LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic https://panasonic.jp/shaver/lamdash/dna/index.html DNAがcanvasによって表現され、3Dの
「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法 | 株式会社LIG
フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロングシャドウ」ってやつは割りと綺麗だなと個人的に思ってます。作り方はCSSならtext-shadowを利用したジェネレーター、Photoshopならスマートオブジェクトを使ったテンプレートやアクションなどがあります。今回は一味違うやり方で、Photoshopの3D機能を使っての作り方をご紹介します。 なぜ3Dで作ったほうが便利かというと、それは、このように、入射光を調整することが簡単に行えるからです。 あと、光の減衰で陰がだんだんとぼやけていくというちょっとリアルな表現もPhotoshopで簡単にできちゃいます。 ※制作環境はPhotoshop CS6以上が必要です。 ロングシャドウをPhotoshopの3D機能で作る方法 3Dオブジェクトに変換 レイヤーに右クリックして、テキストレ
僕と一緒に始めませんか？世界一のカードゲーム「マジック：ザ・ギャザリング」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、紳さんです。 突然ですが、皆さんはマジック：ザ・ギャザリングというカードゲームを知っていますか？ もし、知らないのなら今日は名前だけでも覚えて欲しいと思います。 ちなみに僕はマジック：ザ・ギャザリングの熱狂的なファンなのです。 マジック：ザ・ギャザリングとは？ 一般的な略称は「マジック」、「MTG」。 1993年に世界初のトレーディングカードゲーム（TCG）として誕生し、2013年現在、世界中で最も多くの人間にプレイされているカードゲームである。 その独特な世界観と作りこまれたゲーム性に魅了されたファンは数知れず、マジックに影響を受けたカードゲームは非常に多いと予想される。 LIGにマジックの宣伝依頼が来た事は、僕にとって最大限にテンションが上がる出来事です。しかし、マジックの魅力を写真と文章だけで伝える事は難しく、頭を悩ませました。 マジックの世界は奥が深すぎるのです。 それ
HTML5 input type のブラウザ対応について検証してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる？ 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は？ Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
