令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお

多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ

こんにちは！　2年前の大みそか、新しい年まであと数秒のときにチョコレートを食べていたら気管に入り、本気でむせながら新年を迎えたきょうへいです。 少し前に「リスティング広告担当者がチェックしている運用に役立つサイト10選」という記事を書かせていただきました。 今回は、上記の記事では紹介しきれなかったリスティング広告関連の有益な情報を手に入れることができるおすすめのサイトをピックアップしました。 リスティング広告運用に役立つサイト 1. SEMHAKs http://sem-hacks.com/ 「ryota fujisawa」さんが運営しているブログ。 更新頻度が高く、Google Adwords、Yahoo!プロモーション広告、GDN、YDNなどリスティング広告に関連する情報がたくさんあります！ 2. アドリス http://marketer.jp/ 「株式会社Ad Listing」さんが

はじめまして。LIGでデザイナーをしています、マチルダです。 最近、前職でお世話になったデザイナーの先輩から「アラサーは品が命」という格言をいただいたので、全体的に生き方を見直そうと思っています。 今後とも末永くよろしくお願いいたします。 数年前から、スマートフォンサイト制作のお仕事が多くなりました。 そんなこんなで、「スマートフォンでの使いやすさ」とはなんぞや？を考える日々を送っているのですが、使いやすさって、実際に使ってみないとわからない…でも、自分で実装する技術も時間もない…！ 今回はそんなデザイナーさんでも簡単で素早くプロトタイプを作成できるツール「Prott（プロット）」の使い方をご紹介したいと思います。 ※今回は分かりやすいよう、LIGのスマートフォンサイトをサンプルにして作成手順をご説明いたします。 「Prott（プロット）」とは？ Prott（プロット）はUIデザインで有名

はじめまして。デザイナーののっちです。 好きな業務の1つがバナー制作なのですが、最初の頃は「決められた空間に文字と画像を詰めて、さらには綺麗に見せて……」と、まるでジグソーパズルのようなあの作業にもの、すごーーく時間がかかっていました。これは新米デザイナーなら、誰でも一度は通る道だと思います。 そこで今回は、新米デザイナーが知っておきたい“美しい”バナーを“効率的”に制作するためのフローについてまとめます。 独学でつまずいていませんか？ バナーデザインの作り方を効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年2月に編集部が情報を更新し

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

こんにちは。 上野という土地をいまだに苦手とする野田です。 断固として代官山がいいと入社してからずっとわがままを言っています。 絶対に実現されないですが。 さて、今回は僕がWebデザインの際に参考にしているアニメーションのサイトをご紹介します。 数はそんな多くないですが、時間の空いた時間にでもご覧いただければ幸いです。 Hover States http://hoverstat.es/ このサイトははとても素晴らしいです。各サイトのアニメーションを一覧で確認することができます。 インスピレーションを得たいときに大変助かっています。サイトのアイデア自体、素晴らしいですね。 Unheap http://www.unheap.com/ jQueryのpluginを紹介しているサイトですが、使用目的ももちろん、動きの参考にもなります。 自分でイージングを変えたりして、どういうものがサイトに合うのか

こんにちは、株式会社LIG 執行役員の寺倉と申します。 自社サイトの分析、競合他社、類似サイトの発掘と分析は、KPI設定や改修、WEB戦略を立てる上で非常に重要です。 今回は登録不要、かつ無料で使えるサイト分析ツールとサービスを8つほどまとめてみました。これが誰かのお役に立てば幸いです。 株式会社LIGとは 2007年設立、東京都台東区発のWeb制作会社。年間150サイトリリース、毎年複数のWebデザインアワードを受賞。Web制作だけでなく、月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。 👉Web制作実績 お問い合わせはこちら マジで使える無料のWebサイト分析ツール&サービス8選 類似サイト検索：Google（コマンド検索） https://www.google.co.jp/ 類似サイトを

こんにちは、うららです。突然ですが、みなさんはどんなお家にお住みですか？ 私は実家暮らしですが「独り暮らしをするならオシャレな部屋に住みたいな〜」とか「もし将来結婚して旦那さんと一緒に住むならかわいい家がいいな〜」なんて妄想をよくします。でも、現実にはいろいろと問題が多く、特におしゃれな物件って割高だったりするんですよね。 そんなとき出会った言葉が「リノベーション」です。みなさんはリノベーションという言葉をご存知でしょうか。 リノベーション（renovation）とは、既存の建物に大規模な改修工事を行い、用途や機能を変更して性能を向上させたり価値を高めたりすること。マンションの一部屋から一棟、また、木造・RC造・鉄骨造等、特に構造に関係なく行うことが可能。 住宅リフォームとも混同されるが、リフォームは老朽化した建物を建築当初の性能に戻すことを言い、壁紙の張り替えなど比較的小規模な工事を指す

こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht

地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr

どうも〜、こんにちはぁ！もっともっとWebデザイナーとして成長したいライター、のび太です。 さて、突然ですが「Webデザイナーにとって必要な能力ってなに？ 」という疑問をもったことありませんか？つい最近フリーランスのWebデザイナーとして飯を食っていくことになった僕ですが、最近ますますその答えが知りたくなりました。 HTML、CSSなどのコードが書ける人？Photoshopでキレイなデザインが作れる人？Webについて詳しい人？いったい「Webデザイナー」ってなんなのでしょうね〜？ 僕はこれまでWebデザイナーに関する海外記事を多く読んできましたが、「へぇ〜、Webデザイナーってこんな能力もなんだなぁ〜。」って意外に感じたことが結構ありました。 今回はその中でも特に重要だと思った5つをピックアップしてご紹介したいと思います。 Webデザイナーがスキルアップするために必要な能力5つ 1. 事前

どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！　もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞ Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも

こんにちは、デザイナーのぺちこです。 ぼーっとしている間に妹が高校を卒業していました。さらに、実家に顔を出したら成人式の話をしていました。なんというか、何もかもが衝撃です。 さて。デザイナーならmacじゃないの？という声もよく耳にしますが、コーディング＆（IE）デバッグのことを考えると、Windowsの方が勝手が良いことも多いです。 結果的にデスクトップとノートでWindowsとmacの2つを持っている人も少なくはないのではありませんか。おかげでタイプミスの多さったら。 ということで、今回は制作に関わるWindowsユーザーのみなさまにオススメのフリーソフトをご紹介したいと思います。 Windowsユーザー必見！ 普段使いにも制作にも役立つ便利ツール5選 お手軽キャプチャソフト「LightShot」 Windows標準機能のスクリーンショットは少々使いにくいですよね。 「ちょっとした修正の

こんにちは、ぺちこです。 先日水族館に行ったら「ペンギン12種模型セット」なるものをショップで発見し、危うく買うところでした。 Suicaペンギンのモデルはおそらくアデリーペンギンですが、私が愛してやまないのはジェンツーペンギンです。どうでもいいですね。（興味をもった人はみんな友達） さて、以前にデザイナーのせいとくんが Sassの導入方法と Sassの基本テクニックについてまとめてくれていましたが、今回はそれらを踏まえて、コーディングに役立つextend＆mixin集を作ってみました！ 日々ちょこちょこと作っては使いまわして・・を繰り返しており、あると便利なものは先にまとめておけば楽ではないかと、やっと気付きました。 サンプルで作ったhtmlとscssファイルを一式ダウンロードできるようにしていますので、そのまま使っても良し、各自（各社）毎のコーディングルールに合せて改良しても良し、要ら

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

フラットデザイン、今や大きなトレンドとなっています。 これまであれだけ「Skeuomorphismデザイン」を推進してきたAppleでさえ、iOS 7からフラットデザインを採用し始めました。潮流とは儚いものですね。 フラットデザインの特徴上、見た目がシンプルで質感を要しないので、制作するのに「Skeuomorphismデザイン」ほど時間がかからず大量生産できちゃいます。なので、質の高いアイコンセットを選りすぐるのには結構時間がかかります。 ということで、今回はそんな「フラットデザイン」に使えるエレガントなアイコンセットを20個集めてみました。参考になればと思います。 フラットデザインに使える無料アイコンセット20選 5 Flat Popular Browsers Icons Set PSD https://gooloc.com/5-flat-popular-browsers-icons-s

こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F

こんにちは。あかねです。 デザイナーさん、エンジニアさんに作りたいものを伝えて、出来上がってきたものをチェックするのもディレクターの仕事の1つです。デザイナーさんが見る視点とは違うポイントを見ることで、デザインのクオリティをアップさせることができるかもしれない…！ 今回はディレクターとして見ておくべき、デザインチェックのポイントをご紹介します！ ディレクターの仕事の一つ。デザインチェック。 ポイント1　文字サイズ まずブラウザのサイズを1000×800くらいにします。そして画面を暗くします。そして明るくします。。。 そして見る部分は、 タイトル、見出し、文章それぞれの区別がつくか タイトルが強調されているか 行間が読みやすいよう工夫されているか 画面が暗いor明るい場合でも文字が読みやすいか です。 個人によって画面の明るさはまちまちですので、ターゲットとするユーザはどのくらいの明るさでサ

Build Team Together デザインの知見とグローバルな開発体制を強みに、 貴社のDXを戦略設計から運用まで一貫してサポートします。