特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。

NEW こんにちは。マークアップの胡夢です。 わたしが個人で請けている、外部のWebデザイナーさんから送られてくるデザインデータで、「これだけはやめて欲しい」って事をつらつらと書いてみます(´・ω・｀)ｷﾋﾞｼﾒ 基本的にPSD（Photoshopデータです、一応念のため）を頂いて、そこからマークアップに必要な画像を切り出して使うのですが、毎回苦労する羽目になっておりまして、同じように苦労しているマークアップさんの声をTwitter等で見かけるので、「Webデザインをやるなら、これくらいは知って置いて欲しいなぁ」という内容をまとめてみましたので、記憶に留めてもらえると非常に有り難いです。 お願い【１】レイヤーについて ●レイヤーの結合はホントにヤメテ！ わたしが対応するマークアップ案件はこういったことはほとんど無いのですが、コーディングをしたことがないデザイナーさんでこれをやっちゃう方が居

こんにちは、LIGブログ編集部です。こちらはWebライティングに関する全10回のシリーズ記事です。 皆さんはWebライターに求められる「文章力」って何だと思いますか？ いろいろな意見があると思いますが、やはり「最後まで記事を読ませる力」ではないでしょうか。 もちろん、これまで紹介してきたように、Web上で記事を全文読んでもらうのはかなり難しいこと。WebコンテンツはSEOも大事ですし、プロであれば早く書くことも求められます。初心者ならなおさら難しいはず。でも、せっかく書いた自分の文章は、やっぱり最後まで読んでほしいですよね。 というわけで今回は、Webメディアだからこそ意識しておきたい6つのライティングテクニックを紹介したいと思います。 1. 文章を簡潔にする スマートフォンの普及により、Webコンテンツは電車の待ち時間や移動中、仕事の休憩中などの「隙間時間」に読まれることが多くなりました

近年、プロトタイプやフレームワークと言った言葉をよく耳にします。 どのような変化が起きていて、それに至るまでの考え方や、個人的な見解を書きたいと思います。 閲覧環境と利用者の変化 Webサイトの役割の変化について スマートフォンやタブレットの登場によってWebサイトの閲覧環境は大きく変化しました。 PCの前にわざわざ座り、電源を入れて「さぁ、Webサイトでも見るか〜」から、リビングのソファに座りスマートフォン閲覧するようなスタイルが当たり前になってきました。 Web制作者は常時PCをたちあげてると思いますが、Web業界に関わっていない方はわざわざPCのある部屋に行って見るなんて事は少なくなっていると思います。 コミュニケーション的視点の重要性 Webサイトの価値観や利用状況は変化しているのに、実際にそれらをふまえて制作されている場合は少ないように思います。 利用者の見方が変わって来ているの

@JUNP_Nです。なかなか知らない人が多い（使う人が少ない）らしいので、Macを無線LAN親機にする方法を紹介します。 有線（Ethernet）で接続したMacを無線LAN親機にできます単純に「インターネット共有」を無線でできるってだけの話なのですが、意外と知らない人が多いみたいですね。 ということで早速共有の手順を書いていきます。 1. 「システム環境設定＞共有」を選択 まずはシステム環境設定を開き、共有をクリックしましょう。 システム環境設定はメニューバーのリンゴマークからでもユーティリティからでも開いてください。 2. インターネット共有を設定する 続いて共有ネットワークを作成します。 共有する接続経路：Ethernet（USB Ethernet）相手のコンピューターが使用するポート：Wi-Fiと設定します。 次にWi-Fiオプションの設定です。 セキュリティを40ビットにするか1

Placehold.jpは国産のダミー画像生成ツールです。画像サイズや任意のテキスト、背景やテキストカラーの変更や、JSONを使ったCSSによるカスタマイズなども可能です。 Placehold.jp

@suin さんが、使ってる開発ツールとか公開してたので真似してみた。 結構書き出すと大変だなぁ。 なんか抜け落ちてる気もする。 コマンドライン ツール管理 homebrew: yumとかaptみたいな。 brew-cask: HomebrewでMacアプリをインストールできる。 npm: Node.jsのパッケージ管理ツール。 DevOps puppet: 構成管理ツール。Chefも使ったことあるけどこっちが好き。 ansible: 構成管理ツール。puppetから乗り換えました。マルチプラットフォーム対応されてたので veewee: 仮想マシンのイメージ作るのに便利。packerも使ってみたい気もする。 packer: 使ってみたらveeweeより使いやすかった。（使いやすい方使えばいい気がする） docker: 基本的に開発環境作るときに使用仕事でも使いはじめたので徐々にお勉強中 m

2万円という価格帯ながら使い勝手がよく、コストパフォーマンスに優れる「Zenfone 5」 楽天モバイルやNifMO、hi-ho、DMM mobileといった格安SIMサービスを提供する事業社の多くが取り扱っており、手に取った人も多いはず。今回は、Zenfone 5の設定しておくべきオススメの項目を紹介したいと思います。 1.バッテリーの残量をパーセント表示に 購入直後のZenFone 5のバッテリー残量はとても見づらいものになっています。パーセント表示にしてしまいましょう。 設定画面から「電池」を選択して「電池残量をパーセントで表示する」にチェックを入れましょう。 2.ショートカットをカスタマイズする どんな画面からでもショートカットが利用できるクイック設定オプション。初期状態ではたくさんの項目が表示されていますが、あまりにも多くて項目を探すのが大変なのでいらないものは非表示にするのがオ

ウェブページの広告を非表示にすることで表示速度をアップしようとAdblockなどの拡張機能をインストールしてみたものの、かえって動作が重くなってしまうということがあります。そこで、広告を非表示にできAdblockよりもはるかに軽いと評判の拡張機能「µBlock」を使ってみました。 gorhill/uBlock · GitHub https://github.com/gorhill/uBlock ◆µBlockについて 広告を非表示にしてくれるブラウザの拡張機能としては「Adblock」が圧倒的に有名ですが、最近、企業からお金をもらってホワイトリストに追加するという動きをAdblockが見せ始め、デフォルト設定で表示される広告が増え、さらに、「以前より動作が重くなった」という意見がちらほら聞こえ始めています。 GoogleやAmazonは広告を消す拡張機能「AdBlock Plus」にお金を

こんにちは、ブランディングチームのジョンです。 ぼくは10年近くコピーライターをやってきて、何社か経験もしてきました。Web制作を本業とする会社はLIGが初めてなのですが、この業界に身を置いてひとつ気づいたことがあります。それは、Web制作におけるコピーの価値の低さです。 ※あくまでもぼく自身の日々の中で感じたことなので、以下の内容は個人的な意見になります。 なぜ、そう感じたのか。 いくつか理由はありまして、ひとつは「コピーは原則としてクライアントにいただく」こと、もうひとつは「だからコピーライターがいない」こと、さいごに「コピーの賞はいまだにグラフィックとテレビCMが盛ん」なことです。 1. コピーは原則としてクライアントにいただく いま進めているWeb制作案件のお見積もりに、「コピーライティング費」は入っていますか？　入っていないケースは意外と多いのではないでしょうか。 なぜか？ それ

シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは

Photoshopのライバルになるかもしれない期待の新アプリ「Affinity Photo」がパブリックベータテストを開始しました(公式ブログ、Cult of Mac、Designer News)。現在公式サイトで、名前とメールアドレスを登録すると、ダウンロード方法を記載したメールが送られてきます(わりとすぐ来ました)。 Affinity Photoは名前からも分かる通り、作年リリースされたMac用のデザインアプリ「Affinity Designer」の姉妹ソフト。 プロフェッショナルなイメージ編集ツールとされ、CMYK、LABカラー、チャンネル毎の16bit編集、ICCカラープロファイリング、PhotoshopのPSDと64bitプラグインなど、様々な機能が最初からサポートされています。また、滑らかなパフォーマンスや、タスクに集中するために整理されたワークスペース等、使い心地の面にもこだ

A500KL(日本版)でのテザリング動作を解説します。テザリングには、USB接続も選択ですが、Wi-FiかBluietoothのどちらかが便利です。 1. USBテザリング 2. WI-FIアクセスポイント 3. Bluetoothテザリング(推奨) Bluetoothテザリングの消費電力のメリットは、テザリング動作中よりも、待機中の電力です。動作中の差は15~20%の差(Wi-FiとBluetoothの消費電力差)程度ですが、待機時はWi-Fiの場合、ほぼテザリング動作時に近い値まで上下動するのに対し、Bluetoothテザリングで待機した場合は、通常の待機状態に近い値になります。このためテザリングの親機であるスマートフォン側は常にBluetooth待受状態で待機させておき、子機側のiPadなどを操作するだけで、テザリングの開始・停止ができます。しかしWi-Fiテザリングの場合は、待機消

シンプルなタスク管理サービスで人気の「Todoist」。非常に重宝しているのですが、１つだけ困っているのがタスクの期限に関する記述。 期限を入力する際は日本語で入力するのですが、この書き方をいっつも忘れるんです。 なので今回は、自分への備忘録もかねて、Todoist で使える期限に関する日本語記述式をまとめておこうと思います。 Todoistで使える期限に関する日本語記述式 早速ですが、Todoistで使える、期限や繰り返しに関する日本語記述式を、以下のとおりまとめました。 ちょっとした表記の違いでもエラーになる事があるので注意が必要です。半角スペースが抜けていたり、ひらがなを漢字表記にすると機能しなかったりするのですよ。 記述式 設定できる期限

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

少し前に「jQueryでページの最上部に位置固定した、フルスクリーンスライドショー（クロスフェード）を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみたので紹介してみます。 言葉では少々説明しずらいのでまず動作サンプルから。 「jQueryでページの最上部に位置固定したフルスクリーンスライダーを設置する方法」サンプルを別枠で表示 ページ最上部に位置固定したフルスクリーンサイズでのスライドショーを設置します。 ※画像全体は横スライドして切り替え ページをスクロールさせるとフルスクリーンスライドショーはページ上部に固定されたままになり、下からコンテンツ要素が出現してきます。 スライドショー全体はブラウザサイズを変化させてもウィ

やっと見つけたぞ！チームでも使える無料タスク管理ツールの決定版Producteev！ 2015年2月10日投稿 2017年12月4日更新 カテゴリ：タスク・スケジュール管理 著者: jMatsuzaki 私の愛しいアップルパイへ ええ、あなたがお怒りなのもごもっともです。世の中にタスク管理ツールはありふれているのに、チームでも使えるに足るタスク管理ツールがほとんど存在しないことに腹をたてているのでしょう。 私も以前は同じ問題に苦悩し、とぐろを巻こうとして千切れてしまった病んだ蛇のようになったものです。 しかし、いまは違います。なぜなら「Producteev」に出会ったからです。 １つ１つ見ていきましょう。 １．ネットワーク・プロジェクト・タグで柔軟に分類 Producteevではタスクをネットワーク・プロジェクト・タグの３つの概念で分類できます。 ▼ネットワークで１つのチームや組織を分類し

Flickityはスマフォのフリック操作にも対応したレスポンシブなイメージスライダーの為のスクリプトです。非依存型ですが、jQueryを使ってセッティングのコードを簡略化する事も出来るように設計されているみたいです。動きも滑らかでよさ気。ライセンスはGPLです。 Flickity