最近気になる「SSLとは？」や「SSL証明書って必要なの？」への答え
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる セキュリティ効果の向上、また、SEO対策の効果も期待できるSSL化。 これからSSL化しようとしたとき、その手順が難しそうだと感じる人はもちろん、そもそも「SSLって何？」という人も多いでしょう。 そこで今回の記事では、SSL化を行う前に知っておきたい基本の知識をまとめてみました。 実は、つい最近このブログもSSL化を終えたところです。 SSL化のための面倒そうな作業も、しっかりと「SSLとは何か？」の知識を身につけておけばスムーズに進められます。 誤りなくSSL化を終えるため、ぜひ最後までお付き合い
WEBマーケティングの手法 「3秒で何屋かわかる」 | 「WEB制作」内製化支援.com
こんにちは、WEBマーケティング事業部の難波です。 仕事柄、お客様か否かを問わず、毎日沢山のWEBサイトを拝見いたします。 職業人としての視点も入り込んでしまっているとは思いますが、一人のユーザーとして客観的に考えて、 何を伝えたいのかわからない どういう商品・サービスを扱っているのかわからない といったサイトが多く存在しているように思います。 今回は、ユーザーにきちんと理解され、反響を獲得するために必要なWEBマーケティングの手法、「3秒で何屋かわかる」について述べてまいります。 ファーストビューの重要性 WEB業界では、「ファーストビューが重要」ということがよく言われます。 ファーストビューとは、WEBページにアクセスした際に、スクロール（主に上下移動）せずに閲覧できる画面の範囲を意味する用語です。 弊社のコーポレートサイトのトップページでは、上記キャプチャ部分がファーストビューに当た
テーマパークに SEO 提案をさせる理由 (SEO新人担当者向け） ::SEM R (#SEMR)
テーマパークに SEO 提案をさせる理由 (SEO新人担当者向け） ディズニーランドやUSJ、レゴランドジャパンといったテーマパーク系の企業に SEO 提案をしてもらう新卒研修を毎年行っています。こうした SEO お題を出している意味について。 公開日時：2017年04月24日 20:34 4月なので新人SEO担当者向けの記事を公開します。これは当社の4月入社新卒向けのものですが、参考になる部分もあるかもしれませんので、ここで紹介します。 この時期は毎年、新卒入社者の SEO 研修を担当しています。ここ10年あまり毎年、ある企業に SEO を提案しなさいという課題を出して、プレゼンテーションをしてもらっています。 この研修を始めた当初は東京ディズニーランドを題材として扱っていたのですが、最近はオリンピック公式サイトや警視庁、自衛隊、浅草花やしき、USJ といろいろ変えつつ、今年は4月1日に
カード型UIにおける５つの効果的なテクニック
「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。
Google画像検索っぽいイメージギャラリーを実装できる「jQuery Elastic Grid」 – bl6.jp
jQuery Elastic Gridは、Google画像検索っぽいイメージギャラリーを実装することができるjQueryプラグインです。レスポンシブ対応で軽量、そして使い方も簡単なところがグッドです。ホバーアニメーションもスタイリッシュでとてもかっこいいですね。 以下のページから、jQuery Elastic Gridの実際のデモやダウンロード、使い方などをチェックできます。 jQuery Elastic Grid たくさんのサムネイル画像が並んでいるデモでは、各サムネイル画像をホバーするとオーバーレイによるアニメーションでタイトルが表示されます。クリックすると、その画像の詳細が表示されます。 Google画像検索のようなレイアウトで表示されるので、使い慣れている人にとっては、違和感なく操作できますね。画像の詳細はクリックすることで表示されるので、余計なスペースを使う必要もなく有効的に活用
最近のデザインで使われている、ロゴ・ブランディング・Webサイトのガイドラインのまとめ
Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたいですね。
すべて無料！Webディレクションに欠かせない定番ツール10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターのちゃんれみです。 みなさんは、Web制作でどんなツールを愛用していますか？ デザインツールだけでもPhotoshop、Sketch、かつてのFireworksなど、職種だけでなく、人によって使うツールはさまざまです。たくさんあるツールの中で他の人がどんなものを使っているか、気になりませんか？ 今回はLIGのWebディレクター・ちゃんれみが日頃から愛用しているツールを紹介します。 Webディレクションに欠かせない定番ツールを集めたので、ぜひ参考にしてみてくださいね。 スケジュール・タスク管理 1.Redmine オープンソースのタスク管理ツールです。 「チケット」と呼ばれるタスクを登録し、期限や担当者を設定したり、ガントチャートでスケジュールの管理をしたり、これがなくてはディレクション業務は成り立ちません！ ちなみにLIGではWeb事業部全体でRedmineを使用
ページ内をスムーズにスクロールできる「Smooth Scroll behavior polyfill」 – bl6.jp
Smooth Scroll behavior polyfillは、ページ内をスムーズにスクロールさせる機能を実装することができます。Window インターフェイスの拡張機能として導入されているとのこと。スクロールする位置を細かく指定することも可能です。 以下、Smooth Scroll behavior polyfillの実際のデモページになります。 デモ デモページでは、いくつかのページ内リンクが設置されていて、各リンクのボタンをクリックするとそれに応じた位置まで自動でスクロールされます。 画面の一番下や一番上までスクロールできるのはもちろん、100pxだけ下（もしくは上）にスクロールするといったことも可能です。スクロールさせる位置を細かく指定できるので、カスタマイズしたい人にもうれしいですね。 使い方に関してもすごくシンプルでわかりやすく実装できます。 スクロール動作もサクサクとスムー
「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。
Photoshopを便利に使いこなす 秀逸なアクションまとめ「20 Best Free Photoshop Actions Designers Should Download」
Photoshopを便利に使いこなす 秀逸なアクションまとめ「20 Best Free Photoshop Actions Designers Should Download」 よく使用する一連の流れを記録し使用することができるPhotoshopアクションを使い、日々の業務時間短縮を図っているデザイナーは多いのではないでしょうか。そんな中今回ご紹介するのは、さまざまな種類のPhotoshopアクションをまとめた「20 Best Free Photoshop Actions Designers Should Download」です。 Desert Dust Photoshop Actions – Free Photoshop Brushes at Brusheezy! 魅力的なグラフィックを作り上げることができるアクションが紹介されています。いくつかピックアップしていますので、まずは下記より
レスポンシブなイメージビューアを実装できる「SmartPhoto.js」 – bl6.jp
SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージビューアを実装することができます。写真の短辺側が画面の最大になるポイントまで拡大表示されるのが特徴です。スマホで写真を大きく表示させたい人は要チェックですね。 SmartPhoto.jsの詳しい使い方やダウンロード、または実際のデモは以下のページからチェックできます。 SmartPhoto.js 上記のページでは、サムネイル画像をクリックするとイメージビューアが立ち上がり拡大された画像を見ることができます。背景が黒になっているので、写真に集中してじっくり楽しみたい人にはピッタリですね。 左右には前後移動できる矢印ボタンも設置されているほか、キーボードの矢印キーからでも写真の前後移動が可能です。また、拡大された画像の下にはサムネイル画像の一覧も設置されているので、ここから目的の画像を拡大表示させることもできます。 もちろん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ
2017年4月 webトピックス
Monthly Bookmarks 2017/04 - 2017/06 - NxWorld