タグ

ブックマーク / commte.net (10)

  • 綺麗な動きになった!Web制作前に見ておきたいjQueryプラグインまとめ

    作成:2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー 1.スライドを立体的に切り替え 2.クリックで滑らかにページ遷移させる 3.背景にスライド、フルスクリーンで固定させる 4.横に移動するフルスクリーンスライド 5.キューブ系のスライドを表示 6.下方向へドラッグするとページを再読み込みする 7.要素を上下にフワフワ動かす 8.外部要素をクリックで表示 9.タイピングエフェクト 動作 10.サーチボックスを画面全体にオーバーレイさせる 11.デイトピッカー 12.ドラッグ&ドロップ 画像をアップロードする

    綺麗な動きになった!Web制作前に見ておきたいjQueryプラグインまとめ
  • gulpの使い方 Win/Mac対応

    作成:2015/06/22 更新:2018/05/27 Mac > Web制作 Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Node.jsとは Node.jsをインストールする Mac版バージョン管理ツール:nodebrew Windows版バージョン管理ツール:nodist パッケージマネージャー npmの使い方 gulp(ガルプ)のインストールと使い方 Node.jsとは ご存知な

    gulpの使い方 Win/Mac対応
  • 今っぽくなった!トレンドをおさえたjQuery プラグインまとめ

    作成:2015/04/6 更新:2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション 1.粘性 2.移動するプレースホルダー 3.滑らかにページ移動させる 4.パスワード強度を可視化 5.オートコンプリート 6.テキスト入力 7.Google Map(吹き出し・マーカー) 8.オートページャー 9.プログレス12パターン 10.ノーティフィケーション レタリング 11.1文字ごとに指定 フルスクリーン 12.モーダルウィンドウ(全画面) 13.フォーム(全

    今っぽくなった!トレンドをおさえたjQuery プラグインまとめ
  • Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ

    TL;DR 実務で意外と使う基的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 1.画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 2.画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css 3.float を使わ

    Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
  • すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ

    作成:2014/04/21 更新:2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び 1.今までの回り込み解除 2.横並びや並び順 3.均等に並べる/段組み ナビゲーションメニュー 4.多階層 ドロップダウン 5.amazon風 メガドロップダウン 6.ドロワーメニュー コンテンツメニュー 7.モーダルウィンドウ 8.アコーディオン 9.タブパネル テーブル 10.ストライプテーブル 11.レスポンシブ+テーブル リスト 12.カウント

    すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ
  • スキルが増えた!今後を生き抜くためにWebデザイナーも習得しておきたい技術

    作成:2014/03/17 更新:2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 1.イラスト作成のスキル 2.写真の撮影技術と知識 3.動画編集の技術 4.コピーライティング 5.モーショングラフィック 6.電子書籍の作成 Webデザイナーの基知識とスキル 7.UXUI・IAの知識 8.レイアウト基原則 9.配色+色彩計画 10.フ

    スキルが増えた!今後を生き抜くためにWebデザイナーも習得しておきたい技術
    mut00tum
    mut00tum 2014/03/18
    “「コンテンツを作れる」”ってそういうこっちゃないとおもうけど・・・
  • すごい役立った!Web制作に特化した「提案書」に入れておきたいこと、知識

    作成:2014/02/3 更新:2014/11/01 ディレクション > 提案書に必ず書いておきたいことを順を追ってメモしました。イメージはブログ用なので簡易的なものとなっています。フローや内容は会社によって違うと思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイトリニューアルの提案 自社分析によるサイトの問題点とその解決策 見やすさ、管理しやすさへの主な工夫 サイトレイアウト案(トップページ) フロント画面+管理画面 イメージ 保守+運用 セキュリティ面でのご提案 バックアップと緊急時の対応 サイトマップ案 強み、実績、事例 スケジュール サイトリニューアルの提案 企画提案書の流れをメモしておきます。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。 自社分析によるサイトの問題点とその解決策

    すごい役立った!Web制作に特化した「提案書」に入れておきたいこと、知識
  • 完璧に分かる!「google アナリティクス」の得する設定と使い方まとめ31

    作成:2013/09/24 更新:2014/11/01 SEO対策 > 毎月、ECサイトや情報サイトなどアクセス解析保守を9社ほど作らないといけません。ここらでおさらいを兼ねて、Googleアナリティクスを扱ううえで必要なことを整理しようと思います。今回は成果を上げるうえで「知らないと損する」ことをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 外部連携(初期) 1.複数サイトを一つで管理 2.すべてを一元管理 3.ウェブマスター連携 4.AdWords連携 5.アドセンス連携 共通設定(初期) 6.プロファイル 7.フィルタ 8.IP除外 9.Cookie除外 トラッキング設定(初期) 10.トラッキング設定 11.時間/曜日/日付 12.集客/キーワード/ページ 13.流入/属性/閲覧開始/トレンド 計測方法と基知識 14.ディメンション

    完璧に分かる!「google アナリティクス」の得する設定と使い方まとめ31
  • 効率的に学べた!Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ

    作成:2014/01/6 更新:2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター 1.アクセシビリティ 2.ユーザビリティ 3.UX(ユーザーエクスペリエンス) 4.IA(情報アーキテクチャ) 5.画面設計(ワイヤーフレーム) 6.進行管理 Webデザイナー 7.レイアウト・フォントの知識 8.配色 9.Illustratorの使い方 10.Photoshopの使い方 11.バナー作成 12.ボタン作成 フロントエンドエンジニア 13.HTML5 14.CSS3/Sass 15.javascript 16.jQuery 17.WordPressテー

    効率的に学べた!Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
    mut00tum
    mut00tum 2014/01/06
    それアートディレクターじゃないけど、参考になるまとめ。
  • 写真は怖くない!すごい「Photoshop」マジック小技集23

    作成:2013/07/16 更新:2014/11/01 無料素材 > 写真うつりが悪い、気になるところをサクッと修正したい。今回は、顔や体型を簡単に修正する方法やアクションをまとめました。結構共通する部分が多いですが、顔以外にも使える色々な方法があるのでお試しを。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 髪 1.髪の色を変える 2.髪の毛を切り抜く 肌 3.シミやそばかすを消す 4.肌を美白にする 5.肌を滑らかにする 顎 6.顎をシャープに 7.リフトアップ 目 8.目を大きくする 9.まつげを増やす 10.目のクマ/ほうれい線を消す 11.目の色を変える 鼻・唇 12.鼻を高くする 13.ぷるるん唇にする 14.歯を白くする 体型・表情 15.バストアップ 16.ポーズを変える 17.顔の表情・形を変える 背景 18.背景を消す 19.背景をぼかす

    写真は怖くない!すごい「Photoshop」マジック小技集23
    mut00tum
    mut00tum 2013/07/24
    まずはいい写真を撮れ。話はそれからだ。
  • 1