タグ コムテブログ
人気順 5 users 50 users 100 users 500 users 1000 usersWebデザインの参考にしたい、ファーストビューのアイデアその2 | コムテブログ
作成:2018/05/14 更新:2018/05/14 Webデザイン 今年はスプリットスクリーンや一部をレイヤーさせる見せ方を見るようになりました。(参考: 2018年に使いたいWebデザイントレンド !ファーストビューのアイデア集 )今回は、周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう。 2018年微増しているレイアウトの... 続きを読む
よく使うWordPressのif文(条件分岐)まとめ | コムテブログ
作成:2018/03/19 更新:2018/03/19 WordPress よく使うWordPressのif(条件分岐 / Conditional Tag)。使用頻度が高いものを書いてます。 基本 条件成立時、上の条件でない時、条件が成立しない時の条件が複数あるパターン。条件を増やすときはelseifを増やし、条件が一つだけのときは、elseifとelseを省略する。 <?php if() : ?... 続きを読む
Mac初心者おすすめ!フロントエンドやコーダー向け初期設定 | コムテブログ
作成:2018/03/5 更新:2018/03/05 Tool Windowsを使っていたフロントエンドエンジニアやコーダーがMacに乗り換えたときに、最低限やっておきたいMac初心者向けの便利な初期設定。 ターミナルのテーマ変更 ターミナルもしくは、iTerm等のテーマをiceberg、フォントをRictyに変更。 ダウンロード テーマ: Iceberg フォント: Ricty Diminish... 続きを読む
2018年に使いたいWebデザイントレンド !ファーストビューのアイデア集 | コムテブログ
作成:2017/09/11 更新:2017/09/11 Webデザイン 「提案されたものの、このレイアウトよく見るんだよなぁ」とクライアントさんに思われないように個性を出したい。今回は2018年も使える「遊び心を加えた」Webデザイントレンド、ファーストビューデザインのアイデアをまとめました。 近年増えてきたファーストビューのレイアウトは スプリットスクリーン(分割) シネマグラフ 縦書きのGナビ... 続きを読む
プログラマーにおすすめのATOMパッケージ | コムテブログ
作成:2017/04/3 更新:2017/04/03 Tool 以前、ATOMの基本操作を Atomひと通りの使い方(Windows・Mac編) に書きましたが、今回はATOMおすすめのパッケージを追記。メジャーなパッケージは除外してます。 マークダウンのアウトラインを自動生成 マークダウンのヘディング(h2/h3など)を読み取って、アウトラインを右側に表示してくれるパッケージ。表示されたインディ... 続きを読む
404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集 | コムテブログ
作成:2016/12/26 更新:2016/12/26 Webデザイン ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。 デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャ... 続きを読む
CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 | コムテブログ
作成:2016/11/28 更新:2016/11/28 Web制作 ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回はCSSのみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。 透過処理で文字のくり抜き bac... 続きを読む
最高にわかるChromeデベロッパーツールの使い方(チートシート付き) | コムテブログ
作成:2016/07/11 Tool 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaS... 続きを読む
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ | コムテブログ
CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール(Segmen... 続きを読む
Web制作に必要な知識が一通り学べるベスト記事9選 | コムテブログ
年末にやるべきだったと思いつつも、今更ながらWeb制作前に知っておくと助かる記事を、コムテブログの中から厳選しました。結構自分でもよく見返す記事です。Web制作に必要な基本知識をざっと知りたいときに。 バージョン管理 ファイル等の変更箇所の履歴を管理。複数人が関わるプロジェクトで必須となるGit(ギット)のコマンドやGUIなどの初歩的な知識を順を追って解説してあります。最初は何を準備すればよいのか... 続きを読む
それなりに使える、Web制作者がお世話になる便利ツール | コムテブログ
毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいで... 続きを読む
プログラミングやコーディングを学習したい人に役立つツール | コムテブログ
初心者の生徒さんに「どうやったらコーディングできるようになりますか、最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使って、どう設定するとよいのか」簡単にメモしておきます。 また「○○の時は何を使う、これで練習する」といった感じで決めておけば、コーディングも楽になるかと思います。今回は「最初はコレ!」といった感じで選抜してみました。初心者の方向けの記事となります。 ... 続きを読む
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ | コムテブログ
ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 もくじ WordPress版 受託用マニュアル 1.ヒアリングシート 2.WP版ホームページ制作の流れ 3.WordPress管理マニュアル 4.WP版品質チェックシート 5.... 続きを読む
Webデザイナー必見、実務で役立つ逆引きレイアウト集 | コムテブログ
オシャレなレイアウトやユーザーが使いやすい配置を実現するには、どのようなことに気をつければよいのか。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたいメモ。イメージが湧きやすいように、国産サイトを多めにピックアップしました。 もくじ 1.視線を停止させたい 2.上質さを出したい 3.静寂さを出したい 4.親しみやすさ を出したい 5.文字の存在感を出したい 6... 続きを読む
Node.jsとgulpをインストールして使うまでの入門記事 | コムテブログ
Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 もくじ Node.js... 続きを読む
これからGit を始めてみようという人のための使い方と入門フロー | コムテブログ
Git(ギット) でどういったことができるか、メリットなどは結構知っている人が多いと思うので、ここでは「コマンドやGUIなどの初歩的な部分だけを1日で使える」ようになるためのフローをポイントだけメモしておきます。 内容は知っているけど実際に使っていない人、筆者のような超初心者、分厚い本を読むのが苦痛な人、すぐに使いたいのでポイントだけサクッと教えて欲しい人対象となります。 もくじ 準備 準備する物... 続きを読む
スキルが増えた!Webデザイナーやフロントエンドが「独り立ち」できるビジネス向け技術書11選 | コムテブログ
今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。 実際にどういった本がおすすめ?と聞かれることも多いので、会社と自宅に常備してあり、実際に筆者がサイト構築する際に参考にした本を中心に書いておきます。今回は多くの書籍の中から特にビジネスで使えそうなものを絞りに絞ってピックアップしました。少人数での... 続きを読む
今っぽくなった!トレンドをおさえたjQuery プラグインまとめ | コムテブログ
トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピップアップ。 もくじ マイクロインタラクション 1.粘性 2.移動するプレースホルダー 3.滑らかにページ移動させる 4.パスワード強度を可視化 5.オートコンプ... 続きを読む
Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済むCSSテクニックなどをまとめました。今回はWeb制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 もくじ 画像 1.画像の下にできる隙間をなくす 2.画像の下にテキストが回り込まないようにする 3.floatを使わずに横並び 4.デバイスによって、画像を変更する 5.画像の上に文字を配置 6.鏡像 マ... 続きを読む
ここまで動かせる!楽しいcss アニメーションのサンプル集 | コムテブログ
小気味よいアニメーションを用いたWebサイトを国内でも多く見かけるようになってきました。CSS3により画像編集やFlashが減りメンテナンス性も向上しています。2015年もアニメーションを取り入れるサイトは増えていくでしょう。 今回はCSSアニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 もくじ エフェクトサンプル 1.ア... 続きを読む
Web制作に使える!オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ | コムテブログ
今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 もくじ インタラクティブ 1.クリック時のエフェクト 2.フォームクリック時のエフェクト 3.テキストに11種の動きを出すエフェクト 4.分離するエフェクト フルスクリーンの見栄え... 続きを読む
何を使えばよいか分かった!コーポレートサイトの各ページを制作する前にみておきたいこと | コムテブログ
企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。今回はWordPressで構築した固定ページを見やすくするために、どういったjQuery・WPプラグインを使えばよいのか、またレスポンシブに対応させるための小技もメモしておきます。 もくじ 1.ギャラリーページ 2.サービス/会社概要ページ 3.各ページの背景画像をクライアントさん側で変更可能に 4.問い合わせページ 5.C... 続きを読む
意外となかった!Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート | コムテブログ
遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり(初期費用・ランニング費用)を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトやECサイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめま... 続きを読む
綺麗な動きになった!Web制作前に見ておきたいjQueryプラグインまとめ | コムテブログ
比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 もくじ ファーストビュー 1.スライドを立体的に切り替え 2.クリックで滑らかにページ遷移させる 3.背景にスライド、フルスクリーンで固定させる 4.横に移動するフルスクリーンスライド 5.キュー... 続きを読む
知っておくと便利!あのサイトでさりげなく使われていたCSS小技集 | コムテブログ
今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたいCSSテクニックです。 もくじ 画像 1.キュレーションサイト風のランキングボタン 2.画像の右上に三角形の要素を配置する 3.透過ネオンカラー 4.画像の表示範囲を指定 5.透過させながら画像を合成する 6.マスクをかける 簡単に要素を並べる 7.左右に分割して区切り線... 続きを読む