こんにちは。フロントエンドエンジニアのぜんちゃんです。 皆さんは、ローディングアニメーションをどのように実装していますか? 少し前までは、GIFを使うことが主流だったと思いますが、最近ではCSSだけで実装することが増えてきたように感じます。 CSSだけで実装することで読み込み速度が向上し、見た目も綺麗になります。またJavaScriptを使わないので学習コストも低く、とても手軽に実装できます。 そこで、今回はローディングアニメーションをCSSだけで実装していきたいと思います!
こんにちは、LIGブログ編集部です。 きれいに写真を撮るために一眼レフを買ってみたけど基本的な設定がわからない……という方は多いのではないでしょうか? 私も最初に一眼レフを触ったときは、たくさんダイヤルがあって何がなんだかわかりませんでした。しかし基本さえ押さえればきちんと自分で状況に合わせて設定ができるようになります。 この記事では、カメラの3つの基礎設定、撮影モード、状況に合わせた設定などをお伝えします。 使用する機材は以下の通りです。 ボディ:Nikon D600 レンズ:AF-S NIKKOR 24-70mm 1:2.8G ED ※カメラの機種やメーカーによって、操作方法や機能が異なりますので、あらかじめご了承ください。 ※この記事は2022年2月に編集部が情報を更新しました 3つのカメラ基礎設定 一見複雑に見える一眼レフですが、まずは絞り(F値)、シャッタースピード、 ISO感度
こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう! デザインの引き出しを増やすには? デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO by LIG」の詳細はこちらから ※このページは、2021
こんにちは、HALです。 今回は、動画をWeb用に軽量化するための方法を紹介します! 軽量化を行わないと、たとえば 1280px × 720pxの30秒ぐらいの動画の場合40MBほどの重さになってしまいます。そのままだと videoタグなどでWebブラウザ上で再生するには大きすぎてしまいます。モバイル端末ならさらに軽量化が必要です。 動画の軽量化をするにはさまざまなツールがありますが、 HandBrakeというツールがとても使いやすかったので、基本の設定方法を紹介していきます。 ※この記事は2022年3月に編集部が情報を更新しました 動画を埋め込む方法 外部リンクで埋め込む YouTubeやVimioに動画をアップロードし、それを外部リンクとして埋め込む方法があります。 YouTubeではさまざまなサイズの動画をアップロードすることができますが、標準のYouTube動画のサイズは1920×
こんにちは。LIGが運営するコワーキングスペース「いいオフィス」で管理人をしている、ゆうです。 さて、皆さんはイベント・セミナーなどの情報はどのようにチェックされていますか? 最近はSNS経由などが多いと思いますが、それでは見逃してしまうイベント・セミナーもたくさんあるんじゃないかなぁ…と、思うこともあります。 というわけで今回は、SNSからのシェアではなく、自身で興味のあるセミナー・イベントの情報を探すことができる検索サービスをまとめてみました。参考にしていただけると幸いです。 IT系のイベント・セミナー検索サービス 1. connpass http://connpass.com/ IT系の勉強会を開催したい方・お探しの方ともにおすすめのサイトです。 勉強会に関する企画、告知、集客、リマインド、開催、アフターフォロー、資料の公開、そして次の開催についてまで、そのサイクル全てをサポートする
こんにちは。お久しぶりです。野田です。 ずっと書きたいと思って、あたためてきた記事を公開させていただきます。 「いいなぁ」と思うWeb Siteを見つけたら、僕はまず制作している方を探します。 どういった方が制作されていて、どういった方なのか、興味だけで探し当てます。 Coolな実績を残している方は、やはりPortfolio SiteもCoolです。 今回は、現在も世界中で活躍されているDeveloperの方のPortfolio Websiteをご紹介させていただきます。 私が感想を言うなんて恐れ多いので、Description引用形式でご紹介させていただきます。どうぞご覧ください。 Jongmin Kim(Form Follows Function) http://fff.cmiscm.com/ FFF is a collection of interactive experiences
Pooleリーダーの鮫島です。 競合、丸裸にしてますか?(ライバル視しているサイトの、アクセス数やどこからトラフィックがあるのか、どういったキーワードを選定しどのくらいの検索数があるのかなど、SEO周りの対策を分析していますか?) 私は、主に提案資料を作成するときや、サイト設計をするときなどにします。 そういうときは、競合分析ツールを使うと効率的に情報を取得することができます。 というわけで、今回は私が普段使用している競合分析ツールを厳選して7ツールご紹介します。 無料で使える! 競合サイトを分析できる7つのツール 1. Dockpit(ドックピット) https://www.valuesccg.com/dockpit/ 最近、認知度が高まりつつある競合分析ツールです。 機能の一部が無料で使えるのがかなり助かりますね。 無料登録で取得できる指標はざっと下記の通り。 自社サイトと競合サイトの
こんにちは、LIGブログ編集長の朽木(@amanojerk)です。いま僕の背後では、社長から「デスクが汚い」と怒られたらしい上司が「守破離しなきゃ、守破離…」とブツブツ言いながらゴミを捨てています。 ちなみに、守破離(しゅはり)とは、 まず師匠に言われた型を「守る」ところから修行がはじまり、その型を研究してより自分に合った型をつくることで既存の型を「破り」、最終的には師匠の型、そして自分自身の型からも「離れ」て自在になる。 という意味の、要するに剣道とかのヤツです。多分なんですけど、断捨離(だんしゃり)って言いたかったんだと思います。 さて、かく言う僕も編集・ライティング業務に従事しておりますが、出版社や編集プロダクションの勤務歴はありません。また、今でこそ社内の編集者たちをとりまとめる立場ですが、僕の入社以前は社内に商業経験のある編集者・ライターがほとんどおりませんでした。 何が言いたい
こんにちは、デザイナーのぺちこです。 10月か11月頃から TED(Technology Entertainment Design)Talks に完全にハマっています。隣のデザイナーからは「回し者じゃないか」と言われたりします。 毎日パソコンの前に座ってインターネットをうろちょろしていても、結局は自分の知っている分野の知識を取り入れるくらいしかできないのですが、TEDを適当に漁っていると、そんな研究してる人いるの?っていうくらいマニアックな研究と出会うことができます。 油断して観始めた動画に某害虫の話が出てきた時は本当に後悔しましたが、研究の着想を得る対象は無限大だと学びました。涙 ということで、毎日いろんな分野の動画を観ている中で、Web制作時の考え方に良い影響を与えてくれるんじゃないかなあと感じた動画をいくつかご紹介したいと思います。 あなたの(そして何十億人の)ための巨大なウェブデザ
こんにちは、LIGブログ編集部です。 LIGブログを読んでくれている皆さんの中には、自身でもブログを書いているという方も多いと思います。 しかし、HTMLタグを自分で入力しながら書いている、タグの意味を理解しながら使っている、という人は少ないかもしれません。 最近では、HTMLタグが全くわからなくても、同じような書式の効果が手軽に反映できるブログサービスもたくさんあります。 でも、そのような設定でブログを書こうとすると、改行のときにフォントが崩れたり、勝手に斜字になったり、思わぬストレスになることもありますよね。 実はこれ、HTMLを書式に自動で反映する仕組みにも限界があり、全てを正確に反映できるわけではないことが原因です。 それを修正したり、根本的に防止するためには、HTMLの知識が必要になります。また、せっかくブログを書くからには、しっかりとHTMLタグの意味を理解し、入力していきたい
元トリマーのWEBディレクター、はるきです。犬の中で1番好きなのはミニチュア・シュナウザーです。 普段の仕事ではクライアント様のECサイト運営を行っておりますが、その際にはサイト分析や広告運用だけでなく、一緒に今後のWEB戦略を考えることがあります。そこで必要になってくるのがマーケティングの視点です。 クライアントのニーズがわかっていなければ、どれだけデザインが美しくても、クライアントが満足するサイトはできません。また、ユーザのニーズを読み間違えれば、サイトは制作側のひとりよがりなものになってしまうでしょう。 WEBディレクターはある意味で「企業」と「顧客」とを結ぶ存在です。そこで今回は、自分の日頃のアウトプットも兼ねて、ビジネスをマーケティング視点で考えるための5つのステップについて考えてみたいと思います。 1. マーケティングの概念を知る 2. ビジネス的な思考力を身につける 3. 因
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
こんにちは。あかねです。 デザイナーさん、エンジニアさんに作りたいものを伝えて、出来上がってきたものをチェックするのもディレクターの仕事の1つです。デザイナーさんが見る視点とは違うポイントを見ることで、デザインのクオリティをアップさせることができるかもしれない…! 今回はディレクターとして見ておくべき、デザインチェックのポイントをご紹介します! ディレクターの仕事の一つ。デザインチェック。 ポイント1 文字サイズ まずブラウザのサイズを1000×800くらいにします。そして画面を暗くします。そして明るくします。。。 そして見る部分は、 タイトル、見出し、文章それぞれの区別がつくか タイトルが強調されているか 行間が読みやすいよう工夫されているか 画面が暗いor明るい場合でも文字が読みやすいか です。 個人によって画面の明るさはまちまちですので、ターゲットとするユーザはどのくらいの明るさでサ
こんにちは、デザイナーのももこです。 あっという間に8月が終わってしまい、今年も残す所4ヶ月という事実に愕然としています…。 さて、今回はCSS3を使用し空間的な動きを付けているリッチなサンプルを5つご紹介します。 閲覧の際にはモダンブラウザ(最新のGoogleChromeなど)をご利用下さい。 Animated Books with CSS 3D Transforms https://tympanus.net/Development/AnimatedBooks/ 本にカーソルを当てるとページがパラッと捲れます。 表紙の文言もテキストになっており、更新もし易そうですね。 3D Restaurant Menu Concept https://tympanus.net/Tutorials/3DRestaurantMenu/ レストランで良く見る三つ折りのメニューが開閉します。 高級感を出したい
デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール(写真加工・イラスト作成) テキストエディタ(HTML・CSSのコーディング) 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス (編集部注:この記事は2013年08月29日に公開された記事を再編集したものです。) ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは? ワイヤー
こんにちは。LIGの岩上です。2013年も半分以上が過ぎました。早いですね…ディレクターチームとしての提案力の向上、最適な組織づくりや人事制度、セミナーや講演での伝える技術、社内外から認知され競争力のあるブランド力をつけるにはどうしたらいいかなど、上半期も色々と試行錯誤しています。その中で、役に立った書籍をご紹介します。 コミュニケーションをデザインするための本 カンヌ国際広告祭をはじめ、one show、Venice Festival of Mediaなど国内外の広告賞を多数受賞している、電通のクリエーターのひとり、岸勇希さんの著書です。自ら手がけた7つの代表的な事例と、その手法を詳細に解説しています。岸さんが実際に取り組んだ広告を提案から実行までシーンにあわせて詳細に説明してくれるので、プランナーやディレクター、デザイナー等、業界人として非常に参考になります。コミュニケーションの本質や
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ~っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか?さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう! LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
お疲れさまです、モモコです。 ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。 今回はCSS3だけで作れるローディングアニメーションを5つご紹介します! 閲覧の際にはモダンブラウザ(最新のGoogleChromeなど)をご利用下さい。 FADE LOADING FADE LOADING 入力した文字がふわっと浮かび上がるローディングアニメーション。 質感と動きが合っていてがとてもエレガントです。 CSS3 loading animation experiment CSS3 loading animation experiment DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。 多彩な変化がついており、とてもクールなアニメーションになっています。 CSS only loading spinners CSS onl
search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる? 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は? Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ
暑いですね。 鳥よしです。 あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。 サボってるわけではないのです。 勉強会の内容を見直してもらえればいいのです。 1.jQueryを使用するために まずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> これは、jQueryの実ファイルをgoogleさんから参照しているので、ネットにつながっていないと使用できない書き方ですね。 今回は何も考えずサクッと動かしたいのでこれで行きます。 これによってjQueryが使用できるようになります。 2.jQueryの書き方 jQueryの書き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く