かまてく ブログ

今日の努力は、明日の経験！ - Kamakura Shinsho Engineer Blog

デザイナーにとって大事なのは色を選ぶ“勘”ではなく“知識”

design

デザインは、コンテンツに含まれる内容をより伝わるようにする技法だと考えます。 とても良い内容のコンテンツでも、それが同じ文字で長々と書いてあるのでは、読みにくいです。つまり伝わりにくいです。 逆に伝える技法がよくできていても、内容が薄いものや役に立たないものでは意味がありません。 このことからもデザインは、見栄えのことではなく、機能のことだと言えます。

より使ってもらう、快適に使ってもらうための技法もデザインです。

ツールが使えるからデザイナーではく、また、お絵かきをして見栄えを整えるのがデザイナーではないということです。

知識がないまま、表面上良さそうに見栄えを整えるのは、メッキやお化粧と同じですぐに剥がれてしまいます。

デザインは、構成学と色彩学が必要と考えています。あとは視覚生理学など。

ここでは、色についてのことを解説します。

続きを読む

CSS だけで解決できること

design

いままで画像やjavascriptで対応していたことが最近ではcssだけで表現できるようになってきました。 その中の一部をご紹介させていただきます。
しかし、使用する際の注意点として、一部のブラウザで対応していないプロパティもあります。
場合によって、@supportsを使って代替スタイルを追加するなど、cssだけで条件分岐をして対応する必要があります。 @supportsの使い方についても一番最後の項目でご紹介させていただきます。

conic-gradient

cssのグラデーションで代表的なものといえばlinear-gradientですが、conic-gradientを使えばcssだけで円グラフを作成できます。

https://ide.geeksforgeeks.org/tryit.php/yEgFgnK6Y0

続きを読む

スマフォでもオンマウス効果が欲しい時

design

PCサイトでオンマウスした時の様な動きを、以前はスマフォのサイトで見ることはあまりありませんでした。 jsの設置などで可能ではありましたが、特に要求されることもなく、何よりそのせいで動作に影響が出てしまっては本末転倒なので対応することもありませんでした。

ですが、最近スマフォサイトでもボタンらしい動きが必要という要望を受けて、あらためて確認したところ、今はごく簡単な設定で対応できることになっていました。

ontouchstart属性

　ontouchstart=“”

htmlの該当要素に、このontouchstart属性の記述を加えるだけです。

あとは、PCサイト同様にCSSで:hoverなどの設定がされていればOKです。

因みに、ontouchend=“”でもいけます。

ただし、html5.xでは定義されておらず、W3Cのvalidatorではエラーとなりますので、その点はご注意ください。

構成学の理念について（バウハウスの設立の背景と教育理念）

design

構成学とは？

構成学というと、なんだか身近なものから離れ、難しそうな感じに思われます。

内容としては、色の三要素、色彩対比、配色や単純な幾何学的形体を使ったリズムやコンポジションの実習など。

こう言われると美術の授業で受けたことを覚えている人もいると思います。

そもそも「構成」の名称はドイツ語のゲシュタルト、あるいは英語のコントラクションの日本語約です。

構成学の理念は1919年にドイツのワイマールで開講した造形学校、「バウハウス」で体系化されました。

バウハウスが設立された背景

人間は古代から美しい形やプロポーション（比率）に憧れ、造形における調和の美を求めてきました。西欧では黄金分割やシンメトリーが建築や装飾などさまざまな生活空間に多様され、美の原理として受け継がれてきました。

日本でも住まいの間取り、畳、障子の等量分割や、紋様パターンのシンメトリー、茶室の否定形の不条理な形、茶碗のひび割れや墨流しの偶発的に生じるパターン。ただ、これらは代々伝えられてきており、いわば職人の手によって受け継がれてきたものであります。

続きを読む

Javascript window.onload周辺の実行順序

javascriptや画像の遅延読込をするにあたって、onLoad周辺の実行順序を調べたので備忘録

    window.onload = function(){
        console.log('window.onload 1');
    }

    window.onload = function(){
        console.log('window.onload 2');
    }

    window.addEventListener('load',function(){
        console.log('window.addEventListener load');
        $(function(){
            console.log('window.addEventListener load > $(function(){})');
        })
    });

    $(function(){
        console.log('$(function(){})');
    });

    window.addEventListener('DOMContentLoaded', function(){
            console.log('window.addEventListener DOMContentLoaded');
    });

結果

DOMContentLoaded
↓
window.addEventListener DOMContentLoaded
↓
$(function(){})
↓
onLoad ※googleの速度計測はここまで
↓
window.onload 2
↓
window.addEventListener load
↓
window.addEventListener load > $(function(){})

※console.log('window.onload 1');は後記によって上書きされたため実行されない。

ちょっとだけC

develop

久しぶりにC言語で、簡単なプログラムを書いてみました。

動機はこれ。

if ( $counter != 0 ){
   ......（何かの処理）
}

こんなPHPのソースを見たのですが、 PHPって、int型（型のない言語ですが）の値をインクリメントし続けるとどうなるの？ という疑問が湧いたからです。

そこで、こんなプログラムを書きました。 ソース(test.php)

<?php
$i = PHP_INT_MAX;
echo $i."\n";
$i++;
echo $i."\n";

phpには、PHP_INT_MAXという定義済み定数があって、intの最大値を示しています。 これに、+1するとどうなるかというプログラムです。

実行すると、 $ php test.php 9223372036854775807 9.2233720368548E+18 と、int型のMAXを越えるとfloat型になっています。

C言語の場合は、int型がMAX値を越えるとこうなります。 ソース(test.c)

#include <stdio.h>
int main(void){
int i = 0;
while( ++i > 0 );
printf( "%d",i );
}

Cにも、intの最大値を示す定数（定義）はありますが 1からインクリメントする形でプログラムを作成してみました。 （結果はどうなるか知っているので、while()でループさせています） これをコンパイルして実行すると、 $ cc test.c $ ./a.out -2147483648 と、見事にマイナス値になりました。 因みに、宣言部分をunsigned int にすると0になります。

＊
Cの方がbit列としては分かりやすい形です。 PHPの方はサイズオーバーになったらより大きな型に自動変換ですね。

気が向いたら、Javaではどうなるかを試してみます。

＊＊
大昔、日本語で書かれたCの関連書籍が少なかった頃、ほとんどのCプログラマーが一度は読んでいた「はじめてのC」という本を思い出しました。 タイトルが意味深すぎて、電車で読んでると周りの人から変な目で見られたという伝説が残ってます。

鎌倉新書では正社員を積極採用しています！

(WEBデザイナー)デザインからコンセプト設計まで■賞与実績4ヶ月分■

仕事内容 【仕事内容】 ■ポータルサイト（お墓・葬儀・仏壇）のWebサイト構築のためのWebデザインの設計からコーディング業務まで担って頂きます。 特に事業側のコンセプトを理解しながら、LPやサイトのデザイン設計を提案できる方を求めています。 【提供できる価値・経験】 ■細かく数字を見て、サービスをグロースさせていく経験 1週間単位でスプリントを組んで、数多くの機能をリリースさせていく開発プロセスを導入しています。 数多くのトライ＆エラーを行い、きっちり効果を分析していくことで、サービスを着実に成長させるプロセスが身につきます。 また、事業側のWebディレクターとも密にコミュニケーションを取りながら、事業会社ならではの一体感を持ったクリエイティブワークを実践しています。 ■今後大きく成長するマーケットにおけるサービス開発に携わることができる経験 世界一の高齢化社会である日本においてライフエンディング業界は大きなポテンシャルを持っています。 その業界に必要なサービスを提供することで、大きなユーザーの需要を満たすサービスを提供するやりがいと経験を得ることができます。 また、今の日本社会で必要とされているサービスを提供しているという社会貢献も大きなやりがいとして持つことができます。 【デザインの特徴】 ■企画構想段階から関わり、ユーザー視点に立ったUIの設計、ビジュアルデザイン ■色彩学、構成学、視覚生理学などの知識を生かしたデザイン ■プロジェクトの成功に貢献するデザイン（目的を本質的に達成するデザイン） ■問題点や課題、目的をしっかり理解し、解決するデザイン 応募資格 【必須（MUST）】 ■Webサービスのデザイン・コーディング経験 ■WebサービスやスマートフォンアプリのUI・情報設計の経験 ■Photoshop、Illustratorなどの画像処理ソフトを使用したビジュアルデザイン業務 【歓迎（WANT）】 ■情報の可視化 ■部分遷移、画面遷移を含むプロトタイプ構築経験 ■デザインコンセプトの言語化 ■ユーザー体験の設計業務 ■デザインのトーン＆マナー設計 ■プロダクト改善経験 ▼求める人物像 ・自発的に施策を立案・実行できるマインドを持つ方 ・成長環境の中で自分を試してみたい方 ・数字の分析に強い方 ・コミュニケーション能力 ・課題発見力、解決力 続きを見る