Macawでデザイン→即HTML化

どうも、Kazです。

この数日で面白そうなオーサリングソフトを見つけたので使ってみたのですが、「もしかしたら本気で使えるんじゃないか?」と思ってしまうくらいのアプリでしたので紹介したいと思います。

そのオーサリングソフトの名前は
「Macaw」
http://macaw.co/
macaw_1607_00


 

記事を書いている現在では、バージョンが1.6。MacとWindowsに対応しています。
過去には有料のアプリだったようですが、Download FREEとなっています。
起動してから、いろいろとメニューを探ったのですがレジスターがないようですので完全にフリーのアプリになっているようです。
このアプリを知っている方は、恐らく2014年頃からではないでようか。
日本のサイトでこのアプリを紹介している所は少なく、とても少数派なアプリです。


続きを読む Macawでデザイン→即HTML化


独自ドメインのサイトを広告無し100円以下で立ち上げてみる【1】ドメインとサーバー編

最近、各種無料ウェブサイト制作サービスについて調べています。
近々、弊社のサービスの一部として取り入れる予定もあります。

その一環で現在「独自ドメイン」のウェブサイトを立ち上げるのに最低いくら掛かるのか、
調べて、最安プランを実行してみました。一応「広告無し」で考えます。
(注:人件費は考慮しておりません。)

■必要な物
ウェブサイトを立ち上げるには、サイトのHTMLデータの他に、
・ドメイン
・サーバー
が少なくとも必要です。通常はどちらも有料です。

■ドメイン
まずはドメインです。ウェブサイトのアドレスですね。
ドメインはサーバーを契約すると無料で1つもらえたりする所も多々あります。
(この場合サーバー代がそこそこ必要です。)
今回の実験にあたり、お名前.comの格安ドメインを取得してみました。
お名前.comはマイナーなドメインのセールをよくやっています。
今回は実験用のにxyzドメインを取得してみました。税込32円!安い!
予算100円でしたので、大幅な節約となりました♪
クレジットカードかデビットカードがあればさくっと取得出来ます。

と言うわけで取得してみました。niigata360.xyzです。
お名前.comでの取得画面

■レンタルサーバー
次にサーバーです。ウェブサイトを置く場所ですね。
今回はxdomainの無料レンタルサーバーを使ってみます。なんと無料にもかかわらず広告がありません。
おそらく有料サーバーやドメイン契約への宣伝目的の為のサービスかと思います。
個人的にxserverはレンタルサーバーの中でもかなり信頼しているサービスなので、
xdomainにも期待大です。

■ドメインの設定
ひとまず先に取得したドメインを使えるように設定します。
お名前.comのドメイン設定でネームサーバーをxdomain指定のものにしておきます。
ネームサーバー設定

次にxdomain側で他社ドメインの登録作業を行います。
今回はwhois認証を選びました。ちなみにドメインは10個登録出来るようです。
ドメイン設定追加

設定後、数時間でネームサーバーの情報が行き渡り、FTPでのアクセスも可能になります。
xdomainでは数時間から2日と書いてあります。
これを書いている現在、数時間たってますが、いっこうにアクセスできません。
もしかして、これは2日コースか。
続きは使えるようになってから書きます。ひとまず初回はここまで。

続きます。

-PR-
お名前.com



Xdomain



最近ちょっと変わってきてる?ログイン画面について考えてみた

blog160705

SNS、Webサービス・・・
ログインする機会って結構頻繁にありますよね?
それで最近思ったのです、何か前と変わった気がする。。。
ログイン画面ではユーザー名(もしくはメールアドレス)とパスワードがワンセット。
だいたいテキストボックスが2個ならんでいるのが普通でした。

わかりやすいのはGoogleですね。
ちょっと前まで他と同じくテキストボックスが2個ならんでいる形でしたが、現在はメールアドレスの入力をして「次へ」でパスワードの流れになりました。


login_google01login_google03
初めのメールアドレスで入力ミスがあるとそんなアドレスは登録されていませんと怒られます。

login_google02

 

画面の遷移数とボタンを押す回数は多くなりましたが、一層手順の流れはわかりやすくなったように感じます。
また、項目が1個ずつになったので、自分がミスした場所が明確にわかるようになりました。

なんでこんな仕様になったのでしょうか?
中の人に聞かないとわかりませんが、この変更によってスマホの時にミスったときの操作がしやすくなっているように感じます。
メールアドレスとパスワードを入れてログインしようとしたら、メールアドレスにミスがあってログインできない。
こんなときPCだったらタブキーを利用したり簡単にカーソルを合わせられますが、スマホの場合もう一度タップしてテキストボックスをアクティブにして間違えた文字を選択して・・・
ちょっと面倒です。
ミスが起こった時に判定してくれれば、早めに修正して次の行動(パスワードを入力する)に行けるので、ログインする時には自分が成功したといういい気分でサービスに入っていける。
そういう心理的な達成感があるというのは深読みし過ぎでしょうか?

ちなみにYahoo!ではYahoo! Japanはこれまで通りメールアドレスとパスワードですが、yahoo.comの方では「メールアドレス」→次へ→「パスワード」になっています。

それではいろいろなログイン画面を見てみましょう。

Yahoo!


login_yahoojapan
Yahoo! Japan


login_yahoocom
Yahoo!


上述の通りYahoo! Japanとyahoo.comでは違います。

Facebook


login_facebook

位置がちょっと特徴的ですよね。Facebookは携帯番号を登録していればそちらでもログインできます。

Twitter


login_twitter

Twitterも「ユーザー名」+「パスワード」ですね。Twitterも携帯番号もしくはユーザー名でOK!

Instagram


login_instagram

Instagramも「ユーザー名」+「パスワード」。

Pinterest


login_pinterest

Pinterestも「メールアドレス」+「パスワード」。

Tumblr


login_tumblr01

login_tumblr02

Tumblrは「メールアドレス」→次へ→「パスワード」です!
Tumblrはオートコンプリート機能でパスワードまで一気です。

Evernote


login_evernote

Evernoteも「メールアドレス」+「パスワード」。

Simplenote


login_simplenote

Simplenoteも「メールアドレス」+「パスワード」。
実はログイン機能で引っかかるようになったのがこのSimplenoteなんです。
Simplenoteの場合、メールアドレスとパスワードを入力して不備があると、メールアドレスもパスワードも消去されてしまって1からやり直しになるのです。
これがまた面倒!!(←自分のメールアドレス間違うなって話)
Simplenote大好きなのに、ここがちょっと残念…


まとめ


思ったより「ユーザー名orメールアドレス」+「パスワード」の形が多かった結果になりました。
自宅のパソコンやスマホだと一度ログインしたらあまりログアウトすることもないかもしれませんが、会社のパソコンなどだとセキュリティを考えるときっちりログアウトしておくことが必要だったりします。(必要ならブラウザをシークレットモードで立ち上げましょう(笑)遊ぶのはダメですよー)
ログインの機会の多いサービスだと、ストレスなく使える方がいいですよね。
みなさんはどちらの方式がお好みですか?

自分で入力画面作るときも、使い勝手や心理的なストレス考えたらどちらがいいのか考える必要がありそうです。
ちなみにこのブログはWordPressですが、WordPressのログイン画面も「ユーザー名orメールアドレス」+「パスワード」ですね。


在庫リスクなし!オリジナルグッズを作って販売できるWebサービスまとめ その2

20160612
以前まとめた、在庫を持たずにオリジナルデザインのグッズを作成・販売できるWebサービス
まとめきれなかったものや、新しく登場したものが出てきたので、それらを今回はご紹介したいと思います。

自分だけのグッズを簡単&気軽に作りたい。そんなクリエイタ―さんやデザイナーさんのご参考になれば幸いです!

↓こちらでもグッズ作成サイトをまとめています!
オリジナルグッズを作って販売できるWebサービスまとめ その1

続きを読む 在庫リスクなし!オリジナルグッズを作って販売できるWebサービスまとめ その2


PhotoShop講座:シャープネスを極める

PhoroShopを使っていて、良く使うフィルターの1つに『シャープネス』があると思います。
大半の方は、画像をハッキリさせるために使っていると思いますが
実際にどんな処理が行われているか詳しく説明できる方は少ないと思います。
今回は、このシャープネスの動きを知る事でPhotoShop使いのレベルを上げて頂こうと思います。

『そもそも、シャープネスって何なのか?』
日本語で言ってしまえば『輪郭強調』と言うヤツです。
色の差がある所の境目に
kabe_1606_1kabe_1606_2

『明るい色ならば白く』『暗い色ならば黒く』して境目をハッキリとさせます。

kabe_1606_3
今回は、アンシャープマスクの設定を元に説明いたしますが
アンシャープマスクの『半径』に当る部分は『強調する際の幅』をさします。
『量』は『深さ』の事を差します。
この深さを軸に、浅い部分から深い所まではグラデーションで色調整処理されます。
この幅と深さを結ぶと、断面的には三角形をイメージして頂けると分かりやすいです。

つまりシャープネスのフィスターを効かせると言う事は、色の差がある部分に対してグラデーションの処理を行なっているのと同じ事といえます。

kabe_1606_5

しかし、このシャープネスを効かせすぎるとハロー効果と言って、白浮きしてしまう現象が発生する事があるために
あまり強く(量を多く)する事ができない事があるかと思います。
現象としては、量に対して幅が狭いためグラデーションでの表現ができずベタ塗りで処理されてしまう部分が多くあるからです。

では、どうするか?

kabe_1606_4

シャープネスを場合によては数回に分けて手動でグラデーションを作ればいいのです。
つまり、『幅は広く浅い』設定から『幅が狭く深い』設定まで数回に分けてシャープをかけます。
設定としては、半径を大きい数字から小さい数字へ。量を少ない数値から大きい数値へ変更しながらシャープを効かせます。
そうする事によって、手作業でグラデーションを作る事ができます。
たとえ2回でも効果的な処理となります。

これを上手く使う事ができると、厳しいピンボケ写真でも対応する事が可能になります。
また、シャープを1回かけたよりも自然なメリハリのついた写真に仕上げる事ができます。

kabe_1606_6

最後に、1回シャープと2回シャープのグラデーション処理の違いを見て頂こうと思います。
赤線より上が2回シャープ、下が1回シャープで、部分的に見やすいように強調してみました。
また、グラデーション処理されている幅が分かるように緑の横線を引いています。(2回シャープの方は2本引かれています)

フィルターの動きを知ると言う事は、技術を上げる一歩にもなりますので
今回のシャープネスについては、色々と試してみて下さい。


PHPによるRSS取得後、書出し

WEBサイトのトップページにRSSを書き出して表示する、新着情報を埋め込みたい事はよくあります。
PHP5以降であれば、 simplexml_load_fileを使ってわりと簡単に取得できます。
以下はPHPを使って、このブログのRSS2フィードを取得後、書き出すまでのサンプルです。


サンプルでは、このブログから、タイトル、記事のURL、投稿日、記事概要を5日分取得して書き出しています。
上記コードをrss.phpなどのphpファイルにしてサーバーにアップすると動作します。
[DEMO]
実際にサイトに埋め込むには、html内にPHPコードを呼び出し、.htaccessを使ってHTMLをPHPとして動かすなどの工夫や、記事が取得出来なかった場合のエラー処理などが必要です。

応用すると、
・アイキャッチ画像も取得して、サムネイル付きの新着情報に。
・複数ブログのRSSを取得して日付で並べ替え。
・カテゴリ情報も同時に取得して、カテゴリ毎にアイコン画像を付ける。
・ちょっとしたのアンテナサイトに。
なんてことも、わりと簡単に実装できます。
上記はWordPressの例ですが、RSS(XML構造のデータ)が取得出来ればどんなブログからも情報を引っ張ることができます。

RSSによる情報取得と埋込みは色々便利に使えますので、工夫して使ってみてください。


アメブロにリブログ機能がついたらしい【Tumblrの話をします】

アメブロにリブログ機能がついたらしいです。
公式ブログのリンクはこちらです。
新機能「リブログ」がいよいよリリース!

この「リブログ」という言葉、どこかで聞いたことありませんか??
Facebookに「シェア」があり、Twitterに「リツィート」があり、そしてTumblrには「リブログ」があります。
※Tumblrにはちゃんと「好き」もありますよ!
このリブログ界にアメブロが参入してくるってことですかね?

blog160614

日本ではなかなか爆発的には広まっていないTumblrですが、世界的にはユーザー数を伸ばしているようです。
日本だとSNSは特にビジネスにおいて情報拡散ツールであるという認識が強くて、それを使ったら一気に情報が広がっていったという体験がないと、なかなか使ってもらえないのかもしれません。
個人的には好きなんだけどなぁ。

Tumblrのリブログ


Tumblrでリブログすると、その記事が自分のダッシュボードにも投稿されます。
ちょっとおもしろいのは自分で投稿したことになるところですよね。
※ちゃんとリブログしたものはリブログしたってわかります。
だから気に入ったものをどんどんリブログしていくと、自分のダッシュボードが気に入ったリブログでいっぱいになってくるとかなんとか。

TwitterやFacebookが個人からビジネスの世界に飛び出てとても必要とされているのに対し、Tumblrはいまだに個人が利用して楽しむのにすごく向いてるSNSなのかなと思います。
だから個人的に参考サイトをまとめたり、気に入った写真集めたり、そういう「集める系」には比較的向いていると思います。

触ってみると結構いろいろできるんですよ、Tumblr。

 

いろいろできるTumblrのススメ


  • ブログとしても使える(無料で始められますね)
  • サーバがいらない
  • 独自ドメインOK
  • おしゃれなテンプレートがたくさん
  • 独自のデザインも使える(HTML・CSS等の知識は必須)
  • ちょっとしたCMSとして使える
  • スマホアプリが結構使いやすい
  • MarkdownでもOK
  • 動画・音声投稿もOK
  • 投稿機能がある(アカウントなしで投稿できる)

などなど。
あとWixにRSS吐き出せるのがBlogerとTumblrだけだとか。

それで以前にもTumblrに関する記事書いたりしているのです。

ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。【制作編】
ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。【概要編】

このブログが始まるまでやっていたブログもTumblrでした。
資料的なお話 http://mynotekk.tumblr.com/

こちらはいつもの「空を眺めるサイト Nagamel」です。

12241745_1661604864098440_1419330459294015468_n
このブログはWordPressですが、WordPressならリンク貼り付けるだけでTumblrの記事を簡単に埋め込めるという。。

http://nagamel.tumblr.com/post/144645469337

http://mynotekk.tumblr.com/post/130600725983/selectorinput

こんな感じです。よかったらフォローとかリブログとかLikeしてやってくださいね。
企業サイトでもTumblrでの制作事例もちらほら見かけますし、ちょっと調べてみると楽しいですよ♪
今回は軽い感じでこの辺で。僕は好きなんだけどなぁ。


検索結果から削除ページを速やかに消す。

今回、長くサイトを運営しているお客さまから
「削除したページを検索結果に出ないようにして欲しい」
との依頼を受けました。

大昔は…そう大昔。
Yahooでは巡回の希望とか、削除の希望とか
今考えると寛大に受けていた気がします。

さて、数年ぶりにこのような依頼が入ってきましたので、調べてみると…

基本的にには
・robots.txtを設置して、クローラーの巡回を拒否。
・メタタグでインデックスへの登録を拒否
の作業を行えと言う事なのですが。

Webサーバーにある限りアドレスが分かれば見れてしまう恐れが有るし、
新たにページを用意するのも何だし…
削除してしまうのが心情というもの。

そういった場合
かなり荒療治ですが、今回私が行った手順を試してみてください。

【手順】


1.消したいページはWebサーバーから削除!!


えぇ、思いっきり削除しちゃって下さい。

2.htaccessなど410対応は行わない


完全に行わない訳ではなく、この後の処理のために行わないで下さい。

3.Googleにはページ削除がある!


Googleのアカウントをお持ちの方はログインをして
Search Console 古いコンテンツの削除
https://www.google.com/webmasters/tools/removals?hl=ja

4.削除したいページのURLを入力してリクエスト!!


ここで、削除したいページのアドレスを入れてリクエストボタンを押すのですが、押した直後にチェックされます。
この時に、.htaccessなどの対応をしていると受付けてくれません。
また、チェックが通り「保留中」となっていても「削除済み」となるまで何もしてはいけません。
もし、チェックが通ったからと言ってリダイレクト等の処理を行なうと拒否されてしまいます。

5.数時間待つ…


今回の場合、24時間かからずに…正確な時間は分からないのですが…
確認した時間が24時間かかっていませんでしたので、そのくらいで削除して頂けました。
また、この時点でYahooの検索結果からも消えていましたので、
GoogleとYahooの連携はあるかと思います。

6.さぁ410対応


ここまで来てから、ページ削除の対応を取ります。

…とまぁこんな感じで…
場合により削除までの時間は変わってくると思いますが
検索エンジンに対してリクエストが行える場所があるだけでもありがたい事です。
削除ページを速やかに削除を行いたい場合は、一度お試しください。


音楽を作ってもらおう!!

動画作成を行って行くと、必ずおこるであろう
「あれ、この映像(音楽)どっかで同じ物が…」
と言う現象。
 
今回は特に個人の方で、音楽のそれを回避できるサイトを紹介します。


kaz_a_160601_1 Jukedeck URL:https://www.jukedeck.com/

使い方は至ってカンタン!!

どんなトラックを作りたいか?
「ピアノ」「フォルク」「エレクトリック」「アンビエント」
の4種類から1つを選びます。

どんな雰囲気の曲調にするか?
「UPLIFTING」「CORPORATE」「CHILLED」「AGGRESSIVE」
の4種類から1つ。

そして、曲の長さを設定できます!!
最長で5分ですが、ループや編集でなんとかできる長さかと思います。

あとは「CREATE MY TRACK」のボタンを押すだけ!!

たったこれだけで、オリジナルの曲が自動的に生成されます。
気に入らなかったら、気に入るまで何回も生成することができます。

無料の会員登録をする事で、月に5曲のダウンロードが可能です。

ただし…

ここからが利用に関してのご注意なのですが

著作権自体は、Jukedeckにあります。

そして

無料会員でダウンロードした楽曲の利用を行えるのは、個人または小規模ビジネス(従業員10人未満)の場合に限られています。
個人で利用するには本当にありがたいサイトです。
小規模ビジネス以外の場合は、料金が発生してしまいます。
大規模ビジネス(従業員数10人以上)では1曲21.99ドル(約2700円)でロイヤリティフリーの曲をダウンロード可能。
1曲199ドル(約2万4000円)を支払えば著作権を買い取ることができます。

オリジナルの曲をソノ業態の方に依頼した場合を考えると、時間的・料金的に安いか高いか…

それでも、他の制作物とかぶる事のないオリジナルの曲を用意できるのは
凄くメリットがあると思います。


熟練の手仕事で作り上げる。日本の職人Webサイトまとめ

身近なカトラリーから日本の伝統工芸品まで。
熟練の手仕事で製作されている日本全国の職人たちのサイトをまとめました。

今回取り上げたサイトデザインの多くは、全体的に余白を大きくとり装飾を抑えたシンプルなレイアウトで、その分大きく配置した写真で製作物の美しさを際立てたものになっています。

またコンテンツのひとつひとつが興味深く、それは読みふけっていると時間が経つのも忘れてしまう程。
製作物はもちろん、それを作り出す職人や製造に使う道具、製造行程や現在までの歴史など…お時間あるときに、ぜひ隅から隅までご覧ください。

※以下は2016年5月31日現在の情報です。

無形文化財 鎚起銅器|玉川堂


16
http://www.gyokusendo.com/

新潟県燕市の鎚起銅器製造業。
銅板を金槌で打ち起こしながら形作っていく「鎚起銅器」の国内唯一の産地だそうです。
鎚起でできた鎚目のような背景パターンは時間経過でわずかに色が変化し、鎚起銅器のやわらかな輝きが表現されています。

燕三条 TSUBAMESANJO organic lifestyle creations JAPAN


08

http://www.tsubamesanjo-trade.com/jp/

こちらも同じく新潟から。
古くから「ものづくり」のまちとして金属加工業を営んできた、燕三条の情報発信サイトです。
緑の面と線で区切られたぱきっとしたレイアウトに、現代的なカトラリーがよく映えています。

株式会社昭和洋樽製作所


05

http://www.showayotal.co.jp/

兵庫県のフローリング製作業会社。
創業当初は社名の通り、洋酒用熟成樽の製造をされていて、後にその技術を活かし現在のフローリング業を営むようになったそうです。

角館 伝四郎 DENSHIRO


06

http://denshiro.jp/

秋田県にある樺細工の製造・販売会社のサイト。
樺細工とは山桜の樹皮を使用した伝統工芸品で、風合いが独特で美しいです。
茶筒をはじめお盆や箸置きなど、伝統的なものから現代的なデザインまで様々なバリエーションで製品展開されていました。
ページ内の区切りとして使用されているパララックススクロールに、重なりを強調したシャドウがさりげなく入っていて、ページをめくるような心地よさがあります。

woodpecker


15

http://www.hello-woodpecker.com/

岐阜県の木製品製造・販売メーカー。
まな板・しゃもじなど、木製品を中心に作られています。
トップページの動画は必見。フリーハンドでなめらかに切り出されていくのはまさに職人技で、思わず見入ってしまいました。
白に近いベージュとチャコールグレーの優しい配色や、ぴょこっと飛び出すような楽しいアニメーションで、「人に寄り添う」ような親しみやすいサイトになっています。

SAKUZAN|美濃焼のうつわ 作山窯


04

http://www.sakuzan.co.jp/

岐阜県の陶磁器の窯元。
ロゴの丸いモチーフが所々に配置されていて、サイトの中のワンポイントになっています。
特に製品ページで感じたのですが、全体的にシンプルなレイアウトの中で、写真のトリミング・テキストの置き方などで各ページのコンセプトに合わせた見せ方になっているのがとても勉強になりました。

ヤヱガキ酒造株式会社


10

http://www.yaegaki.co.jp/sake/

兵庫県の酒造メーカー。
白い背景に大きく配置されたタイポグラフィーからはじまり、個性的にトリミングされた写真が印象的なサイトです。

 

終わりに…弊社の採用情報


弊社ホームページでは、ただいま採用ページを公開中です!
お客様の「想い」を、技術を駆使して「カタチ」にしていく…これもひとつの職人技。
一緒に作り上げていける方、ぜひお問い合わせください。




※この情報は2016年5月現在の情報です。詳しくはアートグラフィック新潟Webサイトよりお問い合わせください。