小さな工夫が光る、テキストリンクのHoverアニメーション参考集 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。 私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。 大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。 そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ！」と立ち止まってしまいます。 サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。 というわけで今回は、テキストリンクのHo
Webデザインに黄金比や白銀比を取り入れる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 人が見て美しいとデザインとされる黄金比や白銀比。なんとなく知っているものの、作り方や使い方がよくわからないという人もいますよね。 今回は黄金比や白銀比の考え方についてわかりやすく解説するとともに、Webデザインのレイアウトや画像制作に黄金比や白銀比を取り入れる方法・お役立ちツールをご紹介します。 良かったら参考にしてみてください。 （編集部注：2013年12月16日に公開された記事を再編集したものです。） 黄金比・白銀比って？ 黄金比・白銀比は、古くからある人が見て美しいと言われる調和的な比率のこと。デザインに黄金比や白銀比を使用することで、言葉で言い表せない芸術的な美しさを加えることができます。 まずは黄金比・白銀比がどういうものなのか、基本の考え方についてみていきましょう。 黄金比の比率と作り方 コトバンクによると、黄金比(Golden ratio)
スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
「5W1H」をもとに、サイト制作時の背景やインサイトの課題を洗い出そう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGのアートディレクターの長岡です。 10月は運動会シーズンで、子供の成長がダイレクトに感じられてとても嬉しいです。万国旗制作を手伝ったのも良い思い出です。 さて、今回の記事では、「5W1H」をもとに背景やインサイトを探り、それによって事前に課題や問題点を洗い出すことで、効果的なWebサイトを制作することができるようになるというお話です。 すごく基本的な話ではありますが、Webディレクターや担当者には必要不可欠なものとなりますので、参考にしていただけたらと思います。 背景やインサイトを知る「サイトの5W1H」 それでは一緒に「5W1H」について考えていきましょう。 1. Who：誰がwebサイトを利用するのか？ いったいどんな人たちが、サイトを利用するのか？ きちんとターゲットを見据え、最適なコンテンツを提供する必要があります。 まずは仮説からペルソナを設計していくことが重要
スマートフォンサイトの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; を適宜指定する。 フォ
Webサイトの運用・保守業務を効率化させるための5つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターをしている、まさしです！ 皆さん、今年の目標はもう立てましたか〜？ 去年の目標を達成できていなかった人は、今年こそ目標達成しましょうね！ 次の年末はバタバタしないように、今年はハイペースでいきましょう！ LIGではサイトの新規制作・リニューアルだけでなく、制作したサイトの運用・保守業務も行っています。サイトは一度つくったら置いておけばいいというものではないので、随時更新していくことがユーザによいコンテンツを届けるために重要だと考えています。 ここで、運用・保守業務と聞いて、何を想像しますか？ クライアントからの文字修正や、画像の差し替えなどをイメージするかもしれませんが、実はそれだけではありません。 アクセス解析ツールを使った数値分析のもと、UIを変更してABテストをしたり、ときにはサーバの設定を変更したりしながら、クライアントのKPIを達成するための改善を行いま
誰でも簡単にできるGoogleアナリティクスの検索キーワード分析入門 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGのアートディレクターの長岡です。 前回の記事では、Webサイト制作に関する基礎についてお話させていただきました。 今回はWeb担当者ならぜひやっておきたいアクセスログ解析を使った、オーガニック検索からの流入、そのときに使われているキーワードの分析方法などについて説明していきます。 オーガニック検索からの流入ついて オーガニック検索とは、GoogleやYahoo!、Bingといった検索エンジンを利用してのサイト訪問になります。 これらを調べることで、「サイトを訪問するユーザーが、どういうことに興味・関心を持って自分たちのサイトを見ているのか？」「ユーザーに対して、きちんと有益な情報（コンテンツ）を提供できているか」を分析することができるようになります。 なお、2013年の9月より、Googleが全ての検索に対してSSL通信を使用することになった結果「(not provide
プロモーションとは？PRとの違いや5つの手法について解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集部です。 プロモーションという言葉を聞いたことはあるけど、意味を正しく理解している人は少ないのではないでしょうか。今回はプロモーションの意味やPRとの違い、手法などをご紹介します。 プロモーションの意味があやふやな人や初めてプロモーション担当になった人はぜひ参考にしてください。 プロモーションとは プロモーションとは マーケティング戦略の一部として行われる販売促進のためのあらゆる活動 プロモーションという言葉についてはさまざまな定義がありますが、マーケティング戦略の一部として行われる販売促進のための宣伝活動、あるいは広報活動という意味で用いられることが多いです。 また、プロモーションをおこなう主な目的としては以下の3つなどがあります。 新規顧客の獲得 商品やサービスの認知拡大 既存客に対する販売の動機付け そのため、プロモーションとは広く解釈すれば、販売促進のた
初心者デザイナーにオススメ！アイディアの集め方とその活用方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 突然ですが、柔らかいものは脳に快感を与えて、緊張を緩める効果があるって知っていますか？ 脳がリラックスすることにより、様々なアイディアが生まれるのだそうです。 日々の業務でアイディアに詰まってしまう時もありますよね。 そういう時はほっぺたを触ってリラックス…しても出ません、そんなんじゃ。 そこで今回は、デザイナーにオススメしたいアイディアの集め方とその活用方法をご紹介します。 なぜアイディアが浮かばないのか？ そもそも、どうしてアイディアが浮かばないのでしょうか。 感性が豊かじゃないから？暇さえあればいやらしい妄想ばかりしちゃってるから？ちがいます。 それは経験や知識など、そもそも持っている武器が少ないからではないでしょうか。 ここで再確認しておきたいのは、ゼロから生まれるアイディアは存在しないということ。 アイディア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
