visca__Barcaのブックマーク - はてなブックマーク

GoogleとAdobeのフォントNoto Sans（Source Han Sans）の画期的なところ

2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。これまでの問題ウエイトの不足普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。 ※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。 Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ

visca__Barca 2014/07/25

リンク

Webデザイナーやコーダーの方でも知っておきたいPHPの便利な使い方

この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。キャンペーンページで、指定の時間に受付を終了するたとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇

visca__Barca 2013/09/10

php
*toEver

リンク

Illustrator CC、Dreamweaver CCの新機能とバグまとめ

先日、Stocker.jp / Space にて Adobe CC検証会を開いたのですが、主に Illustrator CC と Dreamweaver CC の話をしました。厳密には私が Photoshop CC の話もしたのですが、話した内容は以下の記事にまとめていますのでここでは省略します。 Adobe Photoshop CCファーストインプレッション | Stocker.jp / diary なお、Illustrator CC の新機能とバグについては、主に Illustrator Mania というサイトの管理人であり、Illustrator のお祭り dot-ai にも出演された鈴木さん（ @suzukisan__ ）にお話いただきました。 ※この記事で使用している画像サンプルは、鈴木さんが勉強会で使われていたものではなく、私が作成したものです。 Illustrator

visca__Barca 2013/08/12

リンク

「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について

2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。なぜそう言えるのかについて、簡単にまとめてみました。目次 FireworksとPhotoshop、それぞれのメリットとデメリットなぜ「Photoshopは効

visca__Barca 2013/05/13

リンク

これからWebデザインの勉強を始めたい方のためのまとめ

これからWebデザインやコーディングの勉強を始めたい方、またはWebデザイナーになったばかりの方向けのまとめ記事です。「無料で始められる…」とか「本を買わなくても…」などのテーマにしようか迷ったのですが、無料ではじめられる記事としては、既にネタ帳さんの以下のようなエントリ↓がありますので、ここでは純粋に私がおすすめしたい記事、本、サイト、ソフトなどを有料無料に関係なく紹介したいと思います。 Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）*ホームページを作る人のネタ帳あと、渋谷でWebデザインスクールを開講しています。詳しくはこちらの記事をご覧下さい。デザイン基礎年末年始にWebデザインを学び直すための3つのステップいきなり手前味噌で申し訳ないですが、これからWebデ

visca__Barca 2013/01/22

リンク

Webデザイナー視点から見たPhotoshop CS6の進化したところ

数週間前から、「Adobe Photoshop CS6 は写真合成機能が大幅に向上している」という報道を見ることが多くなってきました。　例: GIZMODO しかし、Webデザインに関係ありそうな部分といえば「段落スタイル」と「パフォーマンスの向上」くらいで、これはスルーした方がいいかな…と思っていたのですが、試しに CS6 Windows 版のベータ版を使ってびっくり。Webデザインに関連する部分も大きく進化していました。正直、「これは買い」だと思っています。この記事では、私がこれまでに見つけた Adobe Photoshop CS6 の Webデザインに関連しそうな部分の変更点についてまとめています。一部、私のWebデザインスクールの生徒の方が見つけたものもあります。この場で御礼申し上げます。 ※この記事は Photoshop CS6 ベータ版（Windows版）をもとに書かれ

visca__Barca 2012/04/23

かゆいところに手が届くようになっている印象。

*photoshop

リンク

PhotoshopでのWeb制作効率を向上させる「JSX」とは

ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。しかし、最

visca__Barca 2012/04/04

リンク

WordPressテーマ制作チュートリアル

この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストールまだレンタルサーバを借りていない

visca__Barca 2011/12/01

リンク

HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件

私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE（統合開発環境）の一種です。ちなみに、↓のキャラクターは NetBeans IDE 日本語コミュニティの公式マスコットの「ねこび〜ん」です。私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後 HTML/CSS/PHP などWebサイトのコーディングには NetBeans IDE をメインで使っています。私自身、NetBeans IDE を使うようになってからサ

visca__Barca 2011/10/25

コーディング

リンク

[連載]WordPressでWebサービスを作る方法（8:サーバ選びと高速化）

さて、ここまで読まれた方は WordPress でのブログはもちろん、Webサービスを作り、沢山の方に見てもらうために最低限必要なことはお分かりになったかと思います。今回は、WordPress で作ったサイトを公開するために必要なサーバはどのように選ぶべきかと、WordPress をより高速に動かすためにはどうすればよいかについて考えてみたいと思います。といっても、「WordPress を動かすなら絶対このサーバ！」というものがあるわけではなく、用途やPV（アクセス数）によって選ぶべきサーバは異なりますので、色々なサーバについてメリット・デメリットを考えてみたいと思います。目次 PHPとは開発環境の構築 MAMPやXAMPPのインストール WordPressとは WordPressの仕組み WordPressで作られたWebサイトやWebサービス WordPressでWebサービス

visca__Barca 2011/10/25

サーバー

リンク

新MacBook AirはWeb制作のメインマシンになり得るのか

この記事は、2011年版の MacBook Air について書いています。2012年版の MacBook Air については以下の記事をご覧ください。 MacBook Air 2012のレビューとWeb制作者のための設定など先日、新しい MacBook Air（13インチ・SSD 128GB）を購入しました。私は Web制作のメインマシンにするために購入したのですが、購入するまでは正直「こんな薄いマシンをメインにして大丈夫かな…」と不安でいっぱいでした。結論から言うと、私の使い方（Web閲覧・Web制作・PhotoshopによるWebデザイン・動画閲覧等）であれば全く問題なく、今まで使っていた MacBook Pro 13インチ（2010年モデル・2.4GHz・メモリ8GBに増設）や、昨年使っていた DELL のデスクトップPC（Core 2 Duo・メモリ4GB）よりも明らかに動

visca__Barca 2011/08/03

mac

リンク

[連載]WordPressでWebサービスを作る方法（1:PHPとは） | Stocker.jp / diary

このブログでは何度も触れていますが、3月にフリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンしました。このサイトは、WordPress というブログ向けの CMS（コンテンツ管理システム）を使って作りました。このサービスを作った際の手順をケーススタディとして「PHPやWordPressを全く知らない方でも、WordPressでWebサービスを作り、それをたくさんの方に利用して頂ける方法を分かりやすく学べる記事を書こう」と思い書き始めたのがこの記事ですが、「PHPとは」から「WordPressサイトにおける内部SEO」「ソーシャルメディアマーケティング」まで網羅する特大記事になり、1記事として一度に掲載することが難しくなったので、全10回の連載としてお送りします。 WordPressやPHP初心者の方はぜひ1ページ目からソースコードを書き写しながら、既に

visca__Barca 2011/06/17

リンク

[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary

これはもう何年も前から気になってることなのですが。何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。私は、見出しやタイトル画像における文字組み

visca__Barca 2011/02/16

リンク

年末年始にWebデザインを学び直すための3つのステップ

この記事は、以下のような方を対象にしています。現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。もしかしたら他の方にも役立つかなと思い、公開しました。今回は、主にWebデザインの中でも「レイアウト」について書いています。まずは「知る」こと私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く

visca__Barca 2011/01/05

リンク

はてブ1位になると、何が起きるのかまとめてみた

私は以前から、「はてブのホッテントリの上位に表示されるとどういう事が起きるのか」という事がちょっぴり気になっていたのですが、もしかしたら他のブロガーさんやはてなユーザーの方も気になっているのではないかと思い、先月、偶然知らないと損する賃貸マンションの探し方という記事がはてブ1位を取ったときに起こったことをまとめて「どうしたらホッテントリに入ったのか」「ホッテントリ1位になったとき何が起きたのか」を全て公開する事にしました。はてブ1位になるまで、このブログにはわずか1日20PV(ページビュー)しかありませんでした。だからこそ、純粋に「はてブ1位でどれだけの方が来るのか」を計測できたのではないかと思います。日曜にホッテントリ入りした時はわずか470PV/日だった実はこの記事がホッテントリする1週間ほど前、VPSを借りて、Twitter botを動かすまでの設定をまとめてみたという記事