タグ

ブックマーク / liginc.co.jp (17)

  • ディレクターなら知っておきたい著作権の基礎知識 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。ディレクターのJack (@y_kazuhiko) です。 ディレクター連載「Web制作の『契約』と『法律』の第4回は、制作に関する権利についてです。 権利、なにそれ? Webディレクターなら避けては通れない著作権等の権利問題。 今回の連載では、そんな権利関係の悩みを紹介できればと思います。 さて、皆さん! 知的財産権という用語を知っていますか? 「なんか聞いた事があるけど、詳しく説明できない」そんな悩みを連載では解決していきたいと思います。 知的財産権とは? 知的財産権は2種類に大別される! 産業財産権(工業所有権) 著作権 産業財産権に関しては、特許権、意匠権、商標権などがあります。もう1つは、文化的な創作物を保護の対象とする「著作権」があります。 この連載では、Web制作に密接に関わる「著作権」にフォーカスを当てたいと思います! 著作権とは? 著作権とは一体なんでしょう

    ディレクターなら知っておきたい著作権の基礎知識 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 「了解しました」より「承知しました」が適切とされる理由と、その普及過程について | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    あなたは「了解しました」と「承知しました」、どちらをよく使いますか? 【アンケート】 「了解しました」と「承知しました」、どっちを多く使いますか? — 菊池良 / Kikuchi Ryo (@kossetsu) 2016年2月25日 ツイッターでアンケートしたところ、こんな感じでした。わずかに「承知しました」の方が多いですね。 この2つの言い回しですが、「了解しました」よりも「承知しました」を使う方が正しい、とよく言われています。 僕がこれを初めて知ったとき、強い違和感を覚えました。理由は 「了解しました」をよく使っていた 日常でもビジネスでも「承知しました」を使っている人を見たことがなかった ある日、急に言われ始めた からです。「承知」が日常的な言い回しではなかったので、気になったんですね。 そこで調べてみたところ、いつから言われ始めて、どういう経路で定着したのかがある程度わかりました。

    「了解しました」より「承知しました」が適切とされる理由と、その普及過程について | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 日本のイケてるフォトグラファーのポートフォリオサイト25選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。最近使い捨てカメラにハマっています、デザイナーの佐藤タカアキ(@sato_tkaaki)です。「撮るよー、あ、巻いてなかった!」というやりとりが、何とも無駄で好きです。 さて、僕の主な仕事はグラフィックデザインで、人物合成をするときなんかはもちろん一眼レフカメラを使用した撮影からやるのですが、元々カメラマンってわけではなく、一眼レフカメラを格的に扱い始めたのも1年ほど前なので、フォトグラファーの方々と比べると全然使いこなせていません。 慣れだけでは越えられない壁があるとはわかりつつ、イケてるフォトグラファーの方々の写真を見て日々勉強しています。 そこで今回は、僕が個人的に「写真はもちろん、サイトデザインもイケてる!」と思った日のイケてるフォトグラファーのポートフォリオサイトをまとめました。 それではいってみましょーう。 独学でつまずいていませんか? Webデザインを効率的に

    日本のイケてるフォトグラファーのポートフォリオサイト25選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • LIGブログで競合他社の宣伝バナーを無断で掲載したら、普通に怒られた話 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、メディア事業部の紳さんです。 最近、YouTubeの「スキップできない広告」が流れたときにイライラするのをやめました。どうせスキップできないのなら、楽しんだ方が得だと思うんです。 「一体、何のCMなんだい!? どうなっちゃうんだい?」と、つぶやきながら見ると意外と面白いものですよ。 今回は「LIGブログで競合他社の宣伝バナーを無断で掲載したら、普通に怒られた話」をしたいと思います。 LIGブログのバナー運営の現状 月間270万前後のPVがあるLIGブログでは、コーポレートサイトながら様々な企業様のバナー広告を掲載しています。 背景ジャックを含め、5種類26枠のバナー広告は弊社独自のクリエイティブで作られ、「見る人の興味を惹き、クリック率も高く、費用対効果が高い広告」としてクライアントの皆様から好評をいただいております。 しかし、一点、気になる問題を抱えていました。 それは競合他

    LIGブログで競合他社の宣伝バナーを無断で掲載したら、普通に怒られた話 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • お問い合せフォームをコーディングするための9つのTips | 株式会社LIG

    こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは

    お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
  • Web開発者に革命をもたらす!「Web Components」超入門 | 株式会社LIG

    こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSSHTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一

    Web開発者に革命をもたらす!「Web Components」超入門 | 株式会社LIG
  • HTML5 input type のブラウザ対応について検証してみた。 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhoneAndroidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる? 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は? Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ

    HTML5 input type のブラウザ対応について検証してみた。 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 【実例つき】写真編集ソフト「Photoshop Lightroom」の使い方 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    ミッション! ではさっそく、今回のミッションを発表します。 こちらの写真を・・・ こちらの写真に変えるのです! そもそもAdobe Photoshop Lightroomとは? 「Photoshop」という単語が入っているけど、「Photoshop」とはどういう関係なの?と、Lightroomが初耳の方なら誰もが首を傾げるでしょう。 公式サイトの文言を見てみましょう。 Lightroom とは何ですか?また、どのような人を対象としていますか? Adobe Lightroom は、初心者からプロフェッショナルまで、あらゆるレベルのユーザーが写真に必要なすべてのツールを搭載しています。Lightroom は、コンピューター、Web、iPad、モバイルデバイスなど、どこにいても写真を整理、編集、共有できます。お気に入りの写真を編集したり、フラグ付け等の作業をしても、他のデバイスにも全ての編集作業

    【実例つき】写真編集ソフト「Photoshop Lightroom」の使い方 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 美しいWebデザインをタイプ別に!見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    中型ライダー(二輪)免許を持っているライターの内藤です。 日は、ライダーキック並みの強烈さで役に立つ見サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です! 部品に特化した見 部品に特化した見サイトをご紹介します。 見出しデザイン(h1,h2,h3……その他DTPでも) はじめは見出しデザインに特化した見サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ(h1,h2,h3……)のデザインの見ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全

    美しいWebデザインをタイプ別に!見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    hama_shun
    hama_shun 2013/07/03
    見出しとかフッターのデザインを集めてるサイトいいな。
  • スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ

    スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 【デザイナー厳選】バナーデザインの参考ギャラリーサイトまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    みなさんこんにちは! Webデザイナーのえびちゃんです。 バナーデザインを作成していると「レイアウトが上手くいかない」「バナーの参考を上手く探せない、ギャラリーサイトも古いのばかり」「最近のトレンドってどんな感じなんだろう?」……などなど、デザインの悩みってたくさん出てきますよね。 そこで今回は、そんなあなたに現役デザイナーがおすすめするバナーデザインの参考サイトをジャンル別に分類して紹介します! 後半では実際に効果の高かった広告バナーのデザインも紹介しているので、ぜひ参考にしてください。 「ググってわからないこと」が一瞬で解決するかも? Webの知識を効率的に学びたい、未経験からWeb業界への転職・就職を目指している、誰かに教えてもらいたい……という方へ。LIGが運営のWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」では実践的なカリキュラムで最短6ヶ月でWe

    【デザイナー厳選】バナーデザインの参考ギャラリーサイトまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • CSS3アニメーションをらく~に実装!オンラインツール7選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。デザイナーのハルエです。 最近の流行は「トシムリン」です。あぁ次こそ生で見たい・・・。 CSS3でアニメーションを作成するとコードが肥大化して複雑になるため、ライブラリやオンラインツールを使用して作成している方も多いと思います。 簡単なアニメーションで言えば、「transition」でボタンのマウスオーバーに背景色をアニメーションさせたり、画像をフェードさせたり拡大・縮小させたり・・・などなど。 「animation」を使えばさらにできることが広がるのですが、まだまだwebkitブラウザ以外では正常に動作しないのが難点です。 今回は、CSS3アニメーションを一瞬で設定できちゃうオンラインツールをまとめて紹介します。もう知っている人もたくさんいるとは思いますが、まだ使ったことのない方はぜひ一度試してみてください。 CSS3アニメーションを実装!オンラインツール7選 Animate

    CSS3アニメーションをらく~に実装!オンラインツール7選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG

    こんにちは。ライターの内藤です。 恥ずかしながら、最近になって「フラットデザイン」を意識しはじめました。 装飾を最小限におさえることによって、特定のメッセージや製品、アイデアを直球勝負で伝えるデザイン。 フラットデザインは、もともとスマートフォンの小さな画面でシンプルに見せるものから派生したのだと思われますが、Windows8やGoogleの新デザインがきっかけとなって一躍注目を浴びるようになったようです。 もう知っている方も、まだ知らない方もいらっしゃると思いますので、目次のお好きなところから読んでください。 最初から全部読まなくても大丈夫です! フラットデザインとは まずはどんなものか、百聞は一見にしかず、サンプルを見てみましょう。 フラットデザインの例 http://builtbybuffalo.com/ http://www.squarespace.com/templates/ ※

    今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG
  • Photoshopの効率化になるショートカットキー一覧とカスタム方法【2022年最新】 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお

    Photoshopの効率化になるショートカットキー一覧とカスタム方法【2022年最新】 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 脳に優しいデザインを!「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

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

    脳に優しいデザインを!「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 「Compass」、基礎から応用まで! | 株式会社LIG

    こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません! はじめに結論を言うと、CompassでCSSを書くと 早い! 見やすい! メンテしやすい! コード量がぐっと減る! 一度使い出したら最後、もう元には戻れない! 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず! 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください! Compassとは? Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

    「Compass」、基礎から応用まで! | 株式会社LIG
  • 「Sublime Text」 完全入門ガイド!

    こんにちは~ 仕事が恋人のデザイナー、王です φ(≖ω≖。)♪。 最近海外でもてはやされまくりのテキストエディタ「Sublime Text」と恋に落ちたことをこの場で告白したい! やっと出会えたぞ!僕が探し求めていた幻のエディタに!! 昨今話題沸騰中の「Sublime Text」エディタについて、ご紹介しましょう!記事を読んで、ぜひとも他のエディタからSublime Textに乗り換えていただきたいです! 見た目的には、このように、優雅(Sublime)そのもの! MacWindowsLinux 三大プラットフォームで動くのも嬉しいですな! 公式サイトは下記リンクです。 https://www.sublimetext.com/ それでは、動画やキャプチャーを使ってSublime Textの素晴らしい魅力を伝えていきたいと思います。 Sublime Textのチャームポイント 特色機能

    「Sublime Text」 完全入門ガイド!
  • 1